@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-Bold.eot');
    src: local('Mont Bold'), local('Montserrat-Bold'),
    url('/fonts/Mont/Montserrat-Bold.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-SemiBold.eot');
    src: local('Mont Semibold'), local('Montserrat-SemiBold'),
    url('/fonts/Mont/Montserrat-SemiBold.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-Regular.eot');
    src: local('Mont Regular'), local('Montserrat-Regular'),
    url('/fonts/Mont/Montserrat-Regular.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-Regular.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-Light.eot');
    src: local('Mont Light'), local('Montserrat-Light'),
    url('/fonts/Mont/Montserrat-Light.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-Light.woff') format('woff');

    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-Thin.eot');
    src: local('Mont Thin'), local('Montserrat-Thin'),
    url('/fonts/Mont/Montserrat-Thin.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-Thin.woff') format('woff');

    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-Medium.eot');
    src: local('Mont Medium'), local('Montserrat-Medium'),
    url('/fonts/Mont/Montserrat-Medium.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-Medium.woff') format('woff');

    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('/fonts/Mont/Montserrat-ExtraBold.eot');
    src: local('Mont ExtraBold'), local('Montserrat-ExtraBold'),
    url('/fonts/Mont/Montserrat-ExtraBold.woff2') format('woff2'),
    url('/fonts/Mont/Montserrat-ExtraBold.woff') format('woff');

    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Irpn';
    src: url('/fonts/Irpin/Irpin-Regular.woff2') format('woff2');
    url('/fonts/Irpin/Irpin-Regular.woff2') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Irpn';
    src: url('/fonts/Irpin/Irpin-Bold.woff2') format('woff2');
    url('/fonts/Irpin/Irpin-Bold.woff2') format('truetype');
    font-weight: 900;
    font-style: normal;
}


a {
    text-decoration: none;
}

p {
    margin-bottom: 0;
    line-height: 180%;
}

strong {
    font-weight: 600;
}

body {
    font-size: 16px;
    font-family: "Mont", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #272727;
    line-height: 150%;
}

/* 1. Вбиваємо жорстку висоту від Bootstrap, яка стискає сторінку */
.wrap.h-100 {
    height: auto !important;
    min-height: 100vh !important;
}

/* 2. Базові налаштування (якщо ви їх ще не додали) */
html, body {
    height: 100%;
    margin: 0;
}

/* 3. Головний контент гнучко розтягується і штовхає футер вниз */
main {
    flex-grow: 1;
    display: block; /* Гарантуємо, що це звичайний блок, а не зламаний flex */
}

/* 4. Забороняємо футеру стискатися */
footer {
    flex-shrink: 0;
}

h1 {
    line-height: 110%;
    font-weight: 900;
    font-family: "Irpn", serif;
    font-size: 36px;
}

h2 {
    font-size: 30px;
    font-weight: 900;
    font-family: "Irpn", serif;
    line-height: 105%;
}

p {
    font-weight: 400;
    font-size: 18px;
}

.btn-main {
    padding: 18px 32px;
    background: transparent;
    background-size: cover;
    display: inline-block;
    transition: .2s;
    color: #000000;
    text-decoration: none;
    margin-top: 15px;
    font-size: 14px;
    line-height: 100%;
    border-radius: 50px;
    border: 1px solid #000000;
    font-weight: 600;
}

.btn-main img {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    margin-top: -2px;
}

.btn-main:hover img {
    display: inline-block;
    cursor: pointer;
    filter: brightness(500%);
    transition: .3s;
}

.btn-main:hover {
    background: #E6743A;
    color: #ffffff;
    display: inline-block;
    transition: .3s;
    cursor: pointer;
    border: 1px solid transparent;
}

.menu-logo {
    max-width: 130px;
    transition: .3s;
}

.menu-logo:hover {
    transform: translateY(-3px);
}

.offcanvas {
    background: #ffffff !important;
}

.menu-social {
    padding: 0;
    padding-top: 15px;
    margin: 0;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-social li {
    display: inline-block;
}

.menu-social li a {
    display: block;
    padding-left: 8px;
    transition: .3s;
    color: #ffffff;
}

.menu-social li:first-child a {
    padding-left: 0;
}

.menu-social li a:hover {
    transform: translateY(-3px);
}

.menu-social-xs {
    width: 100%;
}

.follow.follow-xs {
    width: 100%;
}

.follow-xs.follow .menu-phone a {
    display: block;
    font-weight: 600;
    padding-left: 0;
    text-transform: uppercase;
    font-size: 14px;
}

.follow-xs.follow .menu-phone a img {
    display: block;
    font-weight: 600;
    padding-left: 0;
    text-transform: uppercase;
    font-size: 14px;
}

.follow-xs.follow .menu-phone a:hover {
    color: #E6743A;
    background: transparent;
}
.follow-menu-bottom a {
    padding: 4px;
}

.menu-phone img{
    width: 40px;
}

.menu-phone a{
    padding: 1px!important;
}

.menu-phone-xs {
    font-size: 18px!important;
}



.navbar-toggler {
    border: none;
    background: #000000;
    padding: 7px 10px;
    border-radius: 3px;
}

.navbar-toggler-icon {
    background-image: url('/img/icons/icon-menu.svg');
}

.nav-item .nav-link {
    font-size: 17px;
    transition: .2s;
    color: #000000;
    font-weight: 600;
    will-change: transform;
}

.nav-item  {
    position: relative;
}

.nav-item:after  {
    content: '';
    position: absolute;
    top:50%;
    right: 5px;
    width: 12px;
    height: 12px;
    background-size: contain;
    transform: translateY(-50%);
}

.offcanvas-header {
    padding: 10px;
}

.offcanvas-header .btn-close {
    position: relative;
    z-index: 1;
    background: #000000 url('/img/icons/icon-close.svg') center center no-repeat;
    background-size: 16px;
    padding: 13px 14px;
    opacity: 1 !important;
    border-radius: 0;
    margin-right: 0;

}

.nav-item .nav-link:hover {
    transform: translateY(-3px);
    color: #E6743A;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(243, 112, 33);
}

.navbar-toggler-icon {
    filter: invert(0)!important;
    opacity: 1;
}

.navbar-toggler {
    border: none;
}

.offcanvas-body {
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.navbar-toggler-icon:focus {
    box-shadow: none;
    border: none;
}

.menu-phone {
    margin-right: 10px;
}

.menu-phone a {
    color: #272727;
    margin-right: 2px;
    font-weight: 300;
    transition: .3s;
    border-radius: 20px;
    padding: 7px 8px;
    margin-left: 2px;
    min-width: 25px;
    display: inline-block;
}
.nav-xs {
    padding: 5px;
}

.nav-xs .nav-link {
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    padding-left: 35px;
    position: relative;
}


.nav-xs .nav-link:before {
   content: '';
    position: absolute;
    top:50%;
    left: 0;
    transform: translateY(-50%);
    background: url('/img/icons/icon-arrow-orange.svg') no-repeat;
    width: 24px;
    height: 17px;
    background-size: contain;
}


.menu-phone a:hover {
    background: #E6743A;
    border-radius: 90px;
}

.wrap-banner {
    background-size: cover;
    min-height: 100%;
    position: relative;
}

.banner-text .btn-main {
    background: #ffffff;
    border: none;
    padding: 18px 32px;
}

.banner-text .btn-main:hover {
    background: #E6743A;

}

.wrap {
    position: relative;
}

.wrap-banner-main {
    background: url('/img/design/bg-img.jpg') center center no-repeat;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

.navbar-brand {
    margin-right: 5px;
}

.banner {
    min-height: 650px;
}

.banner h1 {
    font-weight: 900;
    color: #272727;
    font-size: 30px;
    line-height: 130%;
    width: 95%;
    margin: 0 auto 20px auto;
}

.banner-text {
    position: relative;
    z-index: 1;
}

.banner-text p {
    font-weight: 500;
    color: #2d2d2d;
    font-size: 15px;
    line-height: 180%;
    font-family: "Irpn", serif;
    padding-bottom: 20px;
}

.banner-img img {
    display: block;
}

.banner-name-brand p {
    font-size: 800%;
    display: block;
}

.square {
    width: 40px;
    height: 40px;
    background: #ffffff;
    display: inline-block;
    position: absolute;
    z-index: 0;
    transition: all 0.3s ease;
}

.squares-left-wrap {
    position: absolute;
    height: 89%;
    width: 200px;
    bottom: 0;
    z-index: 0;
    left: 20px;
}

.squares-right-wrap {
    position: absolute;
    height: 89%;
    width: 40px;
    bottom: 0;
    z-index: 0;
    right: 20px;
}

.square-1 {
    bottom: 120px;
    left: 40px;
    background: #989891;
}

.square-2 {
    bottom: 80px;
    left: 80px;
    background: #E6743A;
}

.square-3 {
    bottom: 0;
    left: 80px;
}

.square-4 {
    bottom: 0;
    left: 0;
}

.square-5 {
    bottom: 40px;
    left: 40px;
}

.square-6 {
    bottom: 100%;
    left: 40px;
    background: #C4AC99;
}

.square-7 {
    bottom: 40px;
    left: 160px;
}

.square-11 {
    bottom: 80px;
    right: 0;
}

.square-12 {
    display: none;
}

.square-13 {
    bottom: 0;
    right: 80px;
}

.square-14 {
    bottom: 40px;
    right: 40px;
}

.square-15 {
    bottom: 0;
    right: 0;
}

/* Vyshyvanka cross-stitch sequential fade-in on page load */
@keyframes stitchIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.square {
    animation: stitchIn 0.8s ease-out both;
}

.square-1  { animation-delay: 0.1s; }
.square-2  { animation-delay: 0.18s; }
.square-3  { animation-delay: 0.26s; }
.square-4  { animation-delay: 0.34s; }
.square-5  { animation-delay: 0.42s; }
.square-6  { animation-delay: 0.5s; }
.square-7  { animation-delay: 0.58s; }
.square-8  { animation-delay: 0.66s; }
.square-9  { animation-delay: 0.74s; }
.square-10 { animation-delay: 0.82s; }
.square-11 { animation-delay: 0.9s; }
.square-13 { animation-delay: 0.98s; }
.square-14 { animation-delay: 1.06s; }
.square-15 { animation-delay: 1.14s; }

/* Individual 3D Flip hover effect on each square */
.squares-left, .squares-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Vyshyvanka grid rotation on hover (turning into diamonds) */
.wrap-banner-main:hover .square:nth-child(even) {
    transform: rotate(45deg);
}
.wrap-banner-main:hover .square:nth-child(odd) {
    transform: rotate(-45deg);
}

.services {
    margin-top: 100px;
    margin-bottom: 50px;
}

.services-wrap {
    margin-top: 40px;
}

.services a:not(.btn-main) {
    font-size: 30px;
}

.services-text {
    margin-top: 30px;
}

h2 {
    font-size: 40px;
    margin-bottom: 15px;
}

.services-text p {
    margin-bottom: 15px;
}

.services-block {
    min-height: 150px;
    background: #F2F2F0 center no-repeat;
    display: block;
    padding: 15px;
    margin-bottom: 25px;
    position: relative;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.services-block h3 {
    font-size: 15px;
    font-weight: 700;
    color: #272727;
}

.services-btn {
    width: 50px;
    height: 50px;
    background: #4d5154;
    padding: 18px 17px 18px 16px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all 0.4s ease;
}

.services-btn img {
    display: block;
    width: 17px;
    transition: all 0.3s ease;
}

.services-block:hover .services-btn img {
    transform: translate(3px, -3px);
}

.system-auto {
    background: #F2F2F0 url('/img/design/img-service-1.jpg')  no-repeat;
    background-size: 130%;
    background-position: 600%;
}

.system-auto .services-btn {
   background: #E6743A;
    transition: .3s;
}

.system-auto:hover .services-btn {
   background: rgb(255, 133, 46);
}

.services-block.system-auto:hover {
   background: #F2F2F0 url('/img/design/img-service-1.jpg') no-repeat;
    transition: .3s;
    background-size: 130%;
    background-position: 90% 100%;

}
.system-crm {
    background: #F2F2F0 url('/img/design/img-service-2.jpg')  no-repeat;
    background-size: 130%;
    background-position: 600%;
}

.services-block.system-crm:hover {
    background: #F2F2F0 url('/img/design/img-service-2.jpg') no-repeat;
    transition: .3s;
    background-size: 130%;
    background-position: 90% 100%;
}


.system-crm .services-btn {
    background: #A19D93;
    transition: .3s;
}

.system-crm:hover .services-btn {
    background: rgb(255, 133, 46);
}


.system-erp {
    background: #F2F2F0 url('/img/design/img-service-3.jpg')  no-repeat;
    background-size: 130%;
    background-position: 600%;
}

.services-block.system-erp:hover {
    background: #F2F2F0 url('/img/design/img-service-3.jpg') no-repeat;
    transition: .3s;
    background-size: 130%;
    background-position: 90% 100%;
}

.system-erp .services-btn {
    background: #C4AC99;
    transition: .3s;
}

.system-erp:hover .services-btn {
    background: rgb(255, 133, 46);
}

.web-site{
    background: #F2F2F0 url('/img/design/img-service-4.jpg')  no-repeat;
    background-size: 130%;
    background-position: 600%;
}

.services-block.web-site:hover {
    background: #F2F2F0 url('/img/design/img-service-4.jpg') no-repeat;
    transition: .3s;
    background-size: 130%;
    background-position: 90% 100%;
}

.web-site .services-btn {
    background: #656e76;
    transition: .3s;
}

.web-site:hover .services-btn {
    background: rgb(255, 133, 46);
}



.services-block.system-auto:hover:before {
   opacity: 1;
}

.services-block.system-auto:hover:after {
   opacity: 1;
}

.services-block h3 {
    transition: .3s;
}

.services-block:hover h3 {
    transform: translateX(90px);
    color: #ffffff;

}

.services-block:hover {
    background: #ffffff;
    border-color: #E6743A;
    box-shadow: 0 15px 35px rgba(230, 116, 58, 0.1);
}

.cms {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

.cms img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cms:hover img {
    transform: scale(1.03);
}

.cms .btn-main img {
    transition: .2s;
}

.cms .btn-main:hover img {
    transition: .2s;
}

.cms h2 {
    margin-bottom: 20px;
}

.cms p {
    margin-bottom: 20px;
}

.last-works {
    background: #2D363D;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: 100px;
    position: relative;
}

.last-works-project-img {
    overflow: hidden;
}

.last-works-project-img img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.last-works-project:hover .last-works-project-img img {
    transform: scale(1.05);
}

.last-works:before {
    content: '';
    position: absolute;
    top: 0;
    left: 39px;
    width: 50px;
    height: 50px;
    background: #2D363D;
    transform: translateY(-99%);
}

.last-works:after {
    content: '';
    position: absolute;
    top: 0;
    left: 89px;
    width: 50px;
    height: 50px;
    background: #E6743A;
}

.last-works .container {
    position: relative;
}

.last-works .container:before {
    content: '';
    position: absolute;
    top: -100px;
    right: 53px;
    width: 100px;
    height: 50px;
    background: #2D363D;
}

.last-works .container:after {
    content: '';
    position: absolute;
    top: -149px;
    right: 4px;
    width: 50px;
    height: 50px;
    background: #c9bcb6;

}

.last-works h2 {
    color: #ffffff;
    margin-top: 40px;
}

.last-works p {
    color: #ffffff;
    font-size: 19px;
    margin-top: 20px;
}

.last-works-project .row {
    background: #ffffff;
    padding: 30px;
}

.last-works-project-img  img {
    box-shadow: 7px 6px 16px 4px rgba(0,0,0,0.08);
    -webkit-box-shadow: 7px 6px 16px 4px rgba(0,0,0,0.08);
    -moz-box-shadow: 7px 6px 16px 4px rgba(0,0,0,0.08);
    display: block;
    margin: 40px auto 0 auto;
}

.last-works-project h3 {
    font-weight: 700;
    margin-bottom: 15px;
}

.last-works-project p {
    color: #000000;
    font-size: 14px;
    margin-bottom: 40px;
    position: relative;
}

.last-works-project p:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 77px;
    height: 1px;
    background: #000000;
}

.last-works-project strong {
    font-size: 14px;
    display: block;
}

.last-works-project strong span {
    font-weight: 900;
}

.last-works-project .btn-main {
    margin-top: 40px;
}

.slider-navigation {
    margin-top: 40px ;
    margin-bottom: 50px;
}

.slider-navigation div {
    display: inline-block;
    padding: 20px;
    border: 1px solid #ffffff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slider-navigation div:hover {
    cursor: pointer;
    background: #E6743A;
    border-color: #E6743A;
}

.slider-navigation div img {
    filter: invert(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slider-navigation .btn-nav-right {
    border-left: transparent;
    transform: translateX(-4px);
}

.slider-navigation .btn-nav-right:hover img {
    transform: translateX(4px);
}

.slider-navigation .btn-nav-left img {
    transform: rotate(-180deg);
}

.slider-navigation .btn-nav-left:hover img {
    transform: rotate(-180deg) translateX(4px);
}

.about {
    padding-top: 100px;
    padding-bottom: 100px;
}

.about img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.about:hover img {
    transform: scale(1.03);
}

.about-img {
    display: block;
    margin: 0 auto;
}

.about-img > div {
    display: inline-block ;
    position: relative;
}

.about-img > div > div {
    position: relative;
    display: block;
    z-index: -1;
}

.about-img > div:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100px;
    width: 50px;
    left: 0;
    background: #ffffff;
    z-index: 1;
}

.about-img > div:after {
    content: '';
    position: absolute;
    top: 0;
    height: 50px;
    width: 100px;
    right: 0;
    background: #ffffff;
    z-index: 1;
}

.about-img > div > div:before {
    content: '';
    position: absolute;
    top: 60%;
    height: 50px;
    width: 50px;
    left: -8px;
    background: #D9C9BC;
    z-index: 1;
}

.about-img > div > div:after {
    content: '';
    position: absolute;
    bottom: -24px;
    height: 50px;
    width: 50px;
    right: 30px;
    background: #E6743A;
    z-index: 1;
}

.about-text {
    margin-bottom: 80px;
}

.about-text p {
    margin-bottom: 5px;
    font-size: 16px;
}

footer {
    background: #F2F2F0;
    padding-top: 60px;
    padding-bottom: 40px;
    color: #000000;
}

.footer-logo {
    display: block;
    transition: .3s;
    margin-bottom: 20px;
}

.footer-logo:hover {
   transform: translateY(-3px);
}

.footer-logo img {
    max-width: 255px;
}

.footer-bottom {
    padding-bottom: 5px;
    margin-top: 10px;
    padding-top: 5px;
}

.footer-bottom > div {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-menu ul {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-menu ul li {
    list-style: none;
    margin-bottom: 9px;
}

.footer-menu a {
    color: #000000;
    padding-top: 0;
    padding-bottom: 5px;
    transition: .3s;
    font-weight: 500;
    font-size: 12px;
}

.footer-menu a:hover {
    color: #E6743A;
}

.footer-phone a {
    color: #000000;
    padding-top: 0;
    padding-bottom: 2px;
    transition: .3s;
    font-weight: 500;
    font-size: 12px;
}

.footer-phone a:hover {
    color: #E6743A;
}

.footer-menu .footer-phone {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-menu .footer-phone  li {
    list-style: none;
    margin-bottom: 0;
}

footer .follow a {
    margin-bottom: 5px;
}

footer .follow a {
    display: inline-block;
    transition: .3s;
    margin-right: 3px;
}

footer .follow a:last-child {
   margin-right: 0;
}

footer .follow a:hover {
    transform: translateY(-3px);
}

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

.footer-bottom .footer-menu ul {
    margin-bottom: 0;
    margin-top: 10px;
}

.footer-bottom .footer-menu ul li {
    margin-right: 10px;
    display: inline-block;
}

.footer-developer span {
    font-weight: 300;
    color: rgba(244, 241, 233, .5);
    font-size: 13px;
}

.footer-developer span a {
    transition: .3s;
    display: inline-block;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 10px;
}

.footer-developer span a:hover {
    transition: .3s;
    transform: translateY(-3px);
}

.footer-menu .btn-main {
    padding: 15px 21px;
    margin-top: 5px;
}

.footer-menu .btn-main:hover {
    color: #ffffff;
}

.footer-menu p {
    font-size: 13px;
    font-weight: 300;
    margin-top: 10px;
}

.footer-phone a {
    font-weight: 500;
}

.footer-menu-bottom {
    padding-top: 20px;
    padding-bottom: 5px;
}

.footer-menu-bottom span {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 5px;
}

.footer-menu-bottom a {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 300;
    transition: .3s;
    margin-bottom: 5px;
}

.footer-menu-bottom a:hover {
    color: rgba(255, 255, 255, 0.6);
}

.dev a {
    display: block;
    vertical-align:middle;
    margin-left: 5px;
}

.dev span {
    display: inline-block;
    vertical-align:middle;
}

.text-footer-bottom a {
    text-decoration: underline;
    font-size: 10px;
    transition: .3s;
    margin-top: 8px;
    display: block;
    padding-bottom: 0;
}

.text-footer-bottom a:hover{
    color: #E6743A;
}

.text-footer-bottom span {
    font-size: 10px;
    padding-top: 0;
    display: block;
}

@media(min-width: 768px) {

    h1 {
        font-size: 30px;
    }

    .navbar {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    .menu-social {
        border: none;
        padding-top: 0;
        margin-top: 0;
    }

    .banner {
        padding-bottom: 10px;
    }

    .banner h1 {
        margin-top :0;
        font-size: 43px;
        width: 100%;
    }


    .banner-text p {
        font-size: 19px;
        width: 90%;
        margin: 0 auto 0 auto;
    }

    .banner-text h1 {
        padding-left: 0;
        padding-right: 0;
    }

    .banner-text p {
        padding-left: 0;
        padding-right: 0;
    }

    .services {
        margin-top: 100px;
    }

    h2 {
       font-size: 47px;
    }

    .services-wrap {
        margin-top: 0;
    }

    .services-block {
        min-height: 180px;
    }

    .cms {
        padding-top: 100px;
        margin-top: 75px;
        padding-bottom: 100px;
    }

    .cms:after {
        content: 'UP System';
        position: absolute;
        top: 15%;
        left: 50%;
        font-size: 122px;
        font-weight: 900;
        width: 100%;
        line-height: 120%;
        transform: translate(-50%, -50%);
        color: #F2F2F0;
        text-align: center;
        display: block;
        z-index: -1;
        background: linear-gradient(
                to right,
                #F2F2F0 20%,
                rgba(219, 228, 255, 0.2) 30%,
                rgba(253, 105, 27, 0.09) 70%,
                rgba(4, 34, 96, 0.05) 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        background-size: 800% auto;
        animation: textShine 12s ease-in-out infinite alternate;
    }

    @keyframes textShine {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 100% 50%;
        }
    }

    .last-works {
        padding-top: 110px;
        padding-bottom: 100px;
    }

    .last-works h2 {
        margin-top: 0;
    }

    .last-works-project p {
        width: 90%;
        font-size: 14px;
    }

    .last-works-project strong {
        width: 90%;
    }

    .last-works .container:before {
        top: -160px;
        right: 53px;
    }

    .last-works .container:after {
        top: -209px;
        right: 4px;
    }

    .last-works:after {
        left: 90px;
    }

    .about {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .about-img > div > div:before {
        left: -25px;
    }

    .footer-menu-bottom a {
        margin-bottom: 0;
    }

    .footer-menu-bottom {
        padding-top: 10px;
    }

    .footer-bottom .footer-menu ul li {
        display: block;
    }

    .dev a {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -3px;
    }

    .dev a:hover {
        transform: translateY(-3px);
    }

}

@media(min-width: 992px) {

    h1 {
        font-size: 62px;
    }
    h2 {
        font-size: 62px;
    }

    .offcanvas {
        background: transparent!important;
        background-size: unset;
    }
    .offcanvas-body {
        background: transparent;
    }

    .navbar-nav .nav-item .btn-main {
        padding-top: 19px;
        padding-bottom: 19px;
    }

    .nav-item .nav-link {
        font-size: 18px;
        margin-right: 15px;
        border-top: none;
        font-weight: 500;
    }

    .nav-item .nav-link:last-child {
        border-bottom:none;
    }

    .menu-social-xs {
        width: auto;
    }

    .btn-main {
        font-size: 16px;
        padding: 20px 38px;
    }

    .wrap-banner-main {
        height: 762px;
    }
    .banner {
        min-height: 550px;
    }

    .banner h1 {
        font-size: 55px;
    }

    .banner-text p {
        font-size: 25px;
    }

    .squares-left-wrap {
        width: 969px;
        left: 40px;
    }

    .squares-right-wrap {
        width: 300px;
        right: 40px;
    }

    .square {
        width: 80px;
        height: 80px;
        transition: .3s;
    }

    .square-1 {
        bottom: 240px;
        left: 80px;
    }

    .square-2 {
        bottom: 160px;
        left: 160px;
        background: #E6743A;
        transition: .5s;
    }

    .square-3 {
        bottom: 0;
        left: 160px;
    }

    .square-4 {
        bottom: 0;
        left: 0;
        transition: .4s;
    }

    .square-5 {
        bottom: 80px;
        left: 80px;
    }

    .square-6 {
        bottom: 80px;
        left: 320px;
        transition: .6s;
    }

    .square-7 {
        bottom: 0;
        left: 400px;
        transition: .2s;
    }

    .square-8 {
        bottom: 80px;
        left: 480px;
    }

    .square-9 {
        bottom: 0;
        left: 560px;
        transition: .2s;
    }

    .square-10 {
        bottom: 80px;
        left: 720px;
        background: #C4AC99;
    }

    .square-11 {
        bottom: 0;
        right: 0;
        transition: .4s;
    }

    .square-12 {
        bottom: 0;
        right: 80px;
        transition: .8s;
        display: block;
    }

    .square-13 {
        bottom: 80px;
        right: 0;
    }

    .square-14 {
        bottom: 160px;
        right: 80px;
        background: #6C7D83;
        transition: .4s;
    }

    .square-15 {
        bottom: 240px;
        right: 160px;
        background: #E6743A;
    }

    .footer-bottom .footer-menu ul li {
        display: inline-block;
    }

    .menu-phone a {
        margin-left: 5px;
        min-width: 25px;
        display: inline-block;
    }

    .menu-logo {
        max-width: 160px;
    }

    .nav-item:after  {
        content: '';
        position: absolute;
        top:50%;
        right: 5px;
        width: 0;
        height: 0;
        background: none;
        background-size: contain;
        transform: translateY(-50%);
    }

    .services-block {
        min-height: 200px;
        padding: 20px;
    }

    .services-block h3 {
        font-size: 19px;
    }

    .cms {
        padding-top: 115px;
        margin-top: 75px;
        padding-bottom: 100px;
    }

    .cms:after {
        font-size: 165px;
    }

    .last-works:before {
        top: 0;
        left: 39px;
        width: 100px;
        height: 100px;
    }

    .last-works:after {
        top: 0;
        left: 139px;
        width: 100px;
        height: 100px;
    }

    .last-works .container:before {
        top: -209px;
        right: 99px;
        width: 200px;
        height: 100px;
    }

    .last-works .container:after {
        top: -309px;
        right: 0;
        width: 100px;
        height: 100px;
    }

    .last-works h2 {
        margin-bottom: 30px;
    }

    .last-works p {
        font-size: 22px;
        width: 90%;
    }

    .last-works-project p {
        font-size: 14px;
    }

    .slider-navigation div {
        padding: 30px;
    }

    .about-img > div:before {
        content: '';
        position: absolute;
        top: 0;
        height: 200px;
        width: 100px;
        left: 0;
        background: #ffffff;
        z-index: 1;
    }

    .about-img > div:after {
        content: '';
        position: absolute;
        top: 0;
        height: 100px;
        width: 200px;
        right: 0;
    }

    .about-img > div > div:before {
        top: 70%;
        height: 100px;
        width: 100px;
        left: -10px;
    }

    .about-img > div > div:after {
        bottom: -49px;
        height: 100px;
        width: 100px;
        right: 65px;
    }

    .footer-menu-bottom {
        margin-top: 10px;
    }

    .count-input input {
        width: 70px;
    }

    .last-works-project-img img {
        margin: 0 auto 0 auto;
    }

    .about-text {
        margin-bottom: 0;
        padding-left: 30px;
    }

    .about-text p {
        margin-bottom: 5px;
        font-size: 16px;
    }

    .follow {
        margin-right: 17px;
    }

    .footer-menu .btn-main {
        padding: 17px 13px;
        margin-top: -4px;
        font-size: 12px;
    }

    .text-footer-bottom a {
        font-size: 11px;
        margin-top: 0;
    }

    .text-footer-bottom  {
        margin-top: 50px;
    }

    .text-footer-bottom span {
        font-size: 11px;
        padding-top: 0;
        padding-left: 10px;
    }


}
@media(min-width: 1200px) {

    .wrap-banner-main {
        height: 766px;
    }

    .banner-img {
        min-height: 500px;
    }

    .banner h1 {
        width: 70%;
    }

    .banner-text p {
        font-size: 22px;
        width: 70%;
        margin: 0 auto 0 auto;
    }

    .nav-item .nav-link {
        font-size: 18px;
        margin-right: 25px;
    }

    .menu-phone a {
        margin-left: 10px;
        font-size: 16px;
    }

    .menu-phone a {
        margin-left: 5px;
        min-width: 25px;
        margin-right: 1px;
    }

    .menu-phone a {
        margin-left: 10px;
    }

    .menu-logo {
        max-width: 150px;
    }

    .wrap-banner .btn-main {
        font-size: 16px;
        padding: 20px 38px;
    }

    .last-works-project .row {
        padding: 40px;
    }

    .about-text {
        margin-bottom: 0;
        padding-left: 30px;
        padding-right: 30px;
    }

    .about-text p {
        margin-bottom: 25px;
        font-size: 18px;
    }

    .about-img > div:before {
        transform: translate(-3px, -3px);
    }

    .about:hover .about-img > div > div:before {
        transform: rotate3d(1, 1, 1, 118deg) matrix3d(1, 0, 0, 0, 0, 1, 1.5, 0, 0, 0, 1, 0, 28, 0, 0, 1) translate(48px,2px) scale(1.1);
        background: #2D363D;
    }

    .about:hover .about-img > div > div:after {
        transform: translateY(-15px);
        background: #ffffff;
    }

    .about .about-img > div:after {
       transition: .4s;
        transform: translate(2px, -2px);
    }

    .about:hover .about-img > div:after {
       transform: scale(1.3);
    }

    .about .about-img > div:before {
       transition: .5s;
    }

    .about:hover .about-img > div:before {
       transform: scale(1.15) translate(-6px, -2px) ;
       background: #ffffff;
    }

    .about .about-img img {
        transition: .4s;
    }

    .about:hover .about-img img {
        transform: scale(1.01);
    }

    .about .about-img > div > div:before {
       transition: .3s;
    }

    .about .about-img > div > div:after {
        transition: .4s;
    }

    .about-img > div > div:before {
        left: -35px;
        top: 60%;
    }

    .about-img > div > div:after {
        right: 100px;
    }

    .footer-menu .btn-main {
        padding: 17px 37px;
        margin-top: -4px;
        font-size: 12px;
    }

}

@media(min-width: 1400px) {
    h2 {
        font-size: 65px;
    }

    .wrap-banner-main {
        height: 920px;
    }

    .navbar {
        padding-top: 30px;
        padding-bottom: 15px;

    }

    .nav-item .nav-link {
        margin-right: 25px;
    }

    .banner {
        min-height: 680px;
    }

    .banner h1 {
        font-size: 65px;
        width: 79%;
    }

    .banner-text p {
        font-size: 22px;
    }

    .menu-phone  {
        margin-right: 25px;
        margin-left: 25px;
    }



    .square-1 {
        bottom: 240px;
        left: 80px;
    }

    .square-2 {
        bottom: 160px;
        left: 160px;
        background: #E6743A;
    }

    .square-3 {
        bottom: 80px;
        left: 80px;
    }

    .square-4 {
        bottom: 0;
        left: 0;
    }

    .square-5 {
        bottom: 0;
        left: 160px;
    }

    .square-6 {
        bottom: 80px;
        left: 400px;
    }

    .square-7 {
        bottom: 0;
        left: 480px;
    }

    .square-8 {
        bottom: 80px;
        left: 560px;
    }

    .square-9 {
        bottom: 0;
        left: 640px;
    }

    .square-10 {
        bottom: 80px;
        left: 800px;
        background: #C4AC99;
    }

    .square-11 {
        bottom: 0;
        right: 0;
    }

    .square-14 {
        right: 80px;
    }

    .square-15 {
        bottom: 240px;
        right: 160px;
        background: #E6743A;
    }

    .services-block {
        min-height: 250px;
        padding: 30px 35px;
    }

    .services-block h3 {
        font-size: 24px;
    }

    .services-btn {
        width: 80px;
        height: 80px;
        padding: 32px 17px 18px 30px;
    }

    .services-btn img {
        width: 20px;
    }

    .cms {
        padding-top: 115px;
        margin-top: 87px;
        padding-bottom: 170px;
    }

    .cms:after {
        font-size: 228px;
    }

    .about-img > div > div:before {
        left: -50px;
    }

     .last-works:before {
       transition: .4s;
    }

    .last-works:after {
       transition: .6s;
    }

    .last-works:hover:before {
        transform: translate(0,-80px) ;
    }

    .last-works:hover:after{
        transform: translate(0,-179px);
    }

    .last-works > div:before {
        transition: .5s;
    }

    .last-works:hover > div:before {
        transform: translate(0,50px) scalex(2);
    }

    .last-works > div:after {
        transition: .3s;
    }

    .last-works:hover > div:after {
        transform: translate(0,80px) scaleY(2.5) scaleX(2.32) rotate(90deg);
    }

    footer {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .footer-menu a {
        font-size: 14px;
    }

    .footer-menu .footer-phone a {
        font-size: 14px;
    }

    .text-footer-bottom a {
        font-size: 11px;
    }

}

@media(min-width: 1900px) {
    .banner {
        min-height: 710px;
    }

    .squares-left-wrap {
        width: 1227px;
        left: 50px;
    }

    .squares-right-wrap {
        width: 369px;
        right: 50px;
    }

    .square{
        width: 100px;
        height: 100px;
    }

    .square-1 {
        bottom: 300px;
        left: 100px;
    }

    .square-2 {
        bottom: 200px;
        left: 200px;
        background: #E6743A;
    }

    .square-3 {
        bottom: 100px;
        left: 100px;
    }

    .square-4 {
        bottom: 0;
        left: 0;
    }

    .square-5 {
        bottom: 0;
        left: 200px;
    }

    .square-6 {
        bottom: 100px;
        left: 500px;
        transform: translate(0, -20px);
    }

    .square-7 {
        bottom: 0;
        left: 600px;
    }

    .square-8 {
        bottom: 100px;
        left: 700px;
    }

    .square-9 {
        bottom: 0;
        left: 800px;
    }

    .square-10 {
        bottom: 100px;
        left: 1000px;
        background: #C4AC99;
    }

    .square-11 {
        bottom: 0;
        right: 0;
    }

    .square-12 {
        bottom: 0;
        right: 100px;
    }

    .square-13 {
        bottom: 100px;
        right: 0;
    }

    .square-14 {
        bottom: 200px;
        right: 100px;
        background: #6C7D83;
    }

    .square-15 {
        bottom: 300px;
        right: 200px;
        background: #E6743A;
    }



    .last-works:before {
        top: 0;
        left: 289px;
        width: 100px;
        height: 100px;
    }
    .last-works:after {
        top: 0;
        left: 389px;
        width: 100px;
        height: 100px;
    }

}

/*--- Catalog page */
.breadcrumb {
    margin-top: 0;
    margin-bottom: 10px;
}

.breadcrumb-item {
    position: relative;
}

.breadcrumb li a, .breadcrumb li span {
    color: #000000 ;
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    text-transform: uppercase;
}

.breadcrumb li a:hover {
    color: #E6743A;
}

.breadcrumb li span {
     color: #E6743A;
}

.breadcrumb-item+.breadcrumb-item::before {
    color:  #000000;
}

@media (min-width:768px) {

    .breadcrumb li a, .breadcrumb li span {
        font-size: 14px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        font-size: 14px;
    }
}

.none {
    display: none;
}

.modal-content {
    border: none!important;
    border-radius: 0;
}

.modal-title {
    font-family: "Irpn", serif;
}

.modal-content .btn-primary {
    background-color: #E6743A;
    padding: 14px 20px;
    display: inline-block;
    transition: .2s;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    line-height: 100%;
    border-radius: 50px;
    border: 0;
}

.modal-content .btn-primary:hover {
    background: rgb(255, 133, 46);
    cursor: pointer;
    transform: translateY(-3px);
}

.modal-content .btn-secondary {
    padding: 14px 20px;
    display: inline-block;
    transition: .2s;
    text-decoration: none;
    font-size: 16px;
    line-height: 100%;
    border-radius: 50px;
    border: 0;
}

.modal-content .btn-secondary:hover {
    cursor: pointer;
    transform: translateY(-3px);
}

.form-control {
    border-radius: 0;
}

.form-control:focus {
    box-shadow: none;
    border-color: #E6743A;
}

.modal-link {
    display: inline-block;
    color: #E6743A;
    font-size: 14px;
    transition: .3s;
}

.modal-link:hover {
    cursor: pointer;
    text-decoration: underline;
    transform: translateY(-2px);
}

.content-page {
    min-height: 500px;
}

#cp-menu {
    list-style: none;
    padding: 0;
    border-right: 1px solid #f0f0f0;
}

#cp-menu li a {
    display: block;
    color: #E6743A;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 15px;
    transition: .3s;
}

#cp-menu li:last-child a {
    border-bottom: none;
}

#cp-menu li a:hover, .cp-menu-item-active {
    background: #E6743A;
    color: #fff!important;
}

.table {
    border: 1px solid #dbdbdb;
    position: relative;
}

.table thead th {
    background-color: #f0f0f0;
    border: 1px solid #dbdbdb;
}

.table td {
    border: 1px solid #dbdbdb;
    padding: 15px;
}

.cp-tasks-table-sortable-item td {
    background-color: #dbdbdb!important;
}

.ui-sortable-helper {

}

/*--- Catalog page */
.breadcrumb {
    margin-top: 0;
    margin-bottom: 10px;
}

.breadcrumb-item {
    position: relative;
}

.breadcrumb li a, .breadcrumb li span {
    color: #000000 ;
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    text-transform: uppercase;
}

.breadcrumb li a:hover {
    color: #E6743A;
}

.breadcrumb li span {
    color: #E6743A;
}

.breadcrumb-item+.breadcrumb-item::before {
    color:  #000000;
}

@media (min-width:768px) {

    .breadcrumb li a, .breadcrumb li span {
        font-size: 14px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        font-size: 14px;
    }
}

/*--- Services page*/
.wrap-banner.services-banner {
    background: url('/img/design/banner-services.jpg') #F2F2F0 center bottom no-repeat;
    background-size: 100% ;
    min-height: 60vh;
}
.services-text .about-img > div:before,
.services-text .about-img > div:after,
.services-text .about-img > div > div:before,
.services-text .about-img > div > div:after {
    display: none;
    width: 0;
    height: 0;
}

.problem-body {
    margin-top: 30px;
}


.problem-body-block {
    margin-bottom: 25px;
}


.problem-body-block > div {
    background: #F2F2F0;
    padding: 20px 15px ;
    min-height: 100%;
    border-radius: 5px;
}

.problem-body-block img {
    display: block;
    margin-bottom: 15px;
}

.problem-body-block h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 15px;
}


.problem-body-block p {
    margin-bottom: 0;
    font-weight: 400;
}

.problem-body-block p  {
    font-size: 16px;
}

.problem-text-bottom img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}


.problem-text-bottom strong {
    font-size: 20px;
}


.problem-text-bottom strong strong {
    font-size: 20px;
    display: inline;
}


/*2 smile*/
/* Плавне дихання всієї іконки */
.body-movement {
    animation: floating 5s ease-in-out infinite;
    transform-origin: center;
}

/* Анімація рота: легке зміщення та зміна форми (нерішучість) */
.hesitant-mouth {
    animation: mouthHesitate 4s ease-in-out infinite, mouthWobble 0.2s linear infinite;
    transform-origin: center;
}

/* Кліпання очей */
.blink-anim {
    animation: eyeBlink 2s infinite;
    transform-origin: center;
}

/* Анімація ВЕЛИКОЇ краплі: повільне сповзання */
.heavy-drop {
    animation: dropSlide 4s ease-in-out infinite;
    transform-origin: 82px 22px;
}

/* Ключові кадри */

@keyframes floating {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.01); }
}

/* Рот ледь змінює вигин, імітуючи розгубленість */
@keyframes mouthHesitate {
    0%, 100% { d: path("M 35 75 Q 50 72 65 75 Q 50 78 35 75 Z"); transform: translateX(0); }
    50% { d: path("M 33 76 Q 50 68 67 76 Q 50 80 33 76 Z"); transform: translateX(24px); }
}

/* Ледь помітне нервове тремтіння губ */
@keyframes mouthWobble {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(0.3px); }
}

@keyframes eyeBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.1); }
}

/* Повільний рух важкої краплі */
@keyframes dropSlide {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(8px) scale(1.1); opacity: 1; }
}


/* 3 smile */
/* Плавне погойдування смайла */
.float-anim {
    animation: neutralFloat 4s ease-in-out infinite;
    transform-origin: center;
}

/* Анімація очей: ледь помітне примружування */
.eye-slit {
    animation: eyeSquint 8s ease-in-out infinite;
    transform-origin: center;
}

/* Анімація рота: ледь помітне стискання */
.mouth-slit {
    animation: mouthPress 7s ease-in-out infinite;
    transform-origin: center;
}

/* Ключові кадри */
@keyframes neutralFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.005); }
}

@keyframes eyeSquint {
    0%, 20%, 80%, 100% { transform: scaleY(1.3); opacity: 0.96; }
    50% { transform: scaleY(0.6); opacity: 1; } /* Очі стають вужчими */
}

@keyframes mouthPress {
    0%, 100% { transform: scaleX(1); opacity: 0.9; }
    50% { transform: scaleX(1.05); opacity: 1; } /* Рот ледь розтягується */
}


/* smile 4 */
/* Плавне погойдування всієї іконки */
.float-group {
    animation: steadyFloat 2s ease-in-out infinite;
    transform-origin: center;
}

/* Анімація рота: поглиблення півмісяця (ефект зітхання) */
.mouth-droop {
    animation: mouthSinking 4s ease-in-out infinite;
    transform-origin: center;
}

/* Кліпання очей */
.blink-anim {
    animation: eyeBlink 6s infinite;
    transform-origin: center;
}

/* Ледь помітне вертикальне тремтіння брів */
.calm-brows {
    animation: browsBreath 5s ease-in-out infinite;
}

/* Ключові кадри */

@keyframes steadyFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(2px) scale(1.005); }
}

/* Рот змінює глибину: від спокійного до засмученого */
@keyframes mouthSinking {
    0%, 100% { d: path("M 35 76 Q 50 72 65 76 Q 50 80 35 76 Z"); opacity: 0.8; }
    50% { d: path("M 32 78 Q 50 64 68 78 Q 50 88 32 78 Z"); opacity: 0.95; }
}

@keyframes eyeBlink {
    0%, 93%, 100% { transform: scaleY(1); }
    96.5% { transform: scaleY(0.1); }
}

@keyframes browsBreath {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

.why-our-crm {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-bottom: 0;
    background: #2D363D;
}

.why-our-crm h2 {
    color: #ffffff;
    font-size: 37px;
}

.why-our-crm p {
    color: #ffffff;
}

.why-our-crm ul {
    margin-bottom: 0;
    padding-left: 0;
}

.why-our-crm ul li {
    list-style: none;
    margin-top: 20px;
}

.why-our-crm ul li img {
    display: inline-block;
    margin-right: 20px;
}

.last-works.how-we-work {
    padding-top: 85px;
    padding-bottom: 0;
    margin-top: 0;
    background: #F2F2F0;
}

.last-works.how-we-work:before {
    display: none;
}

.last-works.how-we-work:after {
    display: none;
}


.last-works.how-we-work .container:before  {
    display: none;
}

.last-works.how-we-work .container:after {
    display: none;
}

.last-works.how-we-work h2{
    color: #000000;
}

.how-we-work-header > strong {
    color: #000000;
    display: block;
    font-family: "Irpn", serif;
    font-size: 30px;
    margin-bottom: 25px;
}

.last-works.how-we-work .slider-navigation div {
    display: inline-block;
    padding: 20px;
    border: 1px solid #000000;
    transition: .3s;
}

.last-works.how-we-work .slider-navigation div img {
    filter: invert(1%);
}

.how-we-work .how-we-work-number span {
    font-size: 130px;
    color: transparent;
    -webkit-text-stroke: 1px #E6743A; /* For WebKit/Blink browsers (Chrome, Safari, Opera, etc.) */
    text-stroke: 1px #E6743A;
    display: block;
    line-height: 80%;
    margin-right: 10px;
    font-weight: 600;
}

.how-we-work-header .slider-text h3 {
    color:#000000;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 18px;
}

.how-we-work-header .slider-text p {
    color:#000000;
}

.how-we-work-header .slider-text p {
    font-size: 14px;
    margin-top: 5px;
}

.how-we-work .last-works {
    padding-top: 0;
}

.how-we-work .last-works-project .row {
    padding: 0;
    background: transparent;
}

.how-we-work .last-works-project-img img {
    box-shadow: none;
    -webkit-box-shadow:none;
}

.what-crm-can {
    padding-top: 80px;
    padding-bottom: 80px;
}

.what-crm-can-block {
    margin-top: 40px;
}

.what-crm-can-block img {
    display: inline-block;
}

.what-crm-can-block strong {
    font-size: 18px;
    display: block;
    margin-left: 15px;
}
.what-crm-can-block p {
    font-size: 16px;
    margin-top: 10px;
}

.leave-application {
    padding-top: 80px;
    padding-bottom: 80px;
}

.leave-application h2 {
    font-size: 30px;
    margin:  0 auto 25px auto;
}

.leave-application p {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 25px auto;
}

@media (min-width: 768px) {

    .services-text h2 {
        font-size: 51px;
    }

    .cms.problem:after {
        content: 'Problem';
        position: absolute;
        top: 7%;
        left: 50%;
        font-size: 155px;
        font-weight: 900;
        width: 100%;
        line-height: 120%;
        transform: translate(-50%, -50%);
        color: #F2F2F0;
        text-align: center;
        display: block;
        z-index: -1;
        background: linear-gradient(
                to right,
                #F2F2F0 20%,
                rgba(185, 202, 253, 0.25) 30%,
                rgba(253, 105, 27, 0.27) 70%,
                rgba(4, 34, 96, 0.05) 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        background-size: 800% auto;
        animation: textShine 12s ease-in-out infinite alternate;
    }

    .why-our-crm h2 {
        font-size: 42px;
    }

    .why-our-crm p {
        font-size: 16px;
    }

    .why-our-crm ul li {
        margin-top: 40px;
    }

    .why-our-crm ul li:first-child {
        margin-top: 0;
    }

    .why-our-crm ul li p {
        font-size: 18px;
    }

    .what-crm-can h2 {
        width: 85%;
    }

    .what-crm-can strong {
        width: 85%;
        display: block;
        line-height: 120%;
        font-size: 20px;
    }

    .what-crm-can-block p {
        font-size: 18px;
        margin-top: 15px;
    }

    .leave-application h2{
        text-align: center;
        line-height: 120%;
        font-size: 40px;
    }

    .leave-application p {
        width: 79%;
    }

}

@media (min-width: 992px) {
    .last-works.how-we-work {
        padding-top: 0;
    }

    .last-works.how-we-work h2 {
        margin-bottom: 60px;
    }

    .last-works.how-we-work .slider-navigation {
        margin-top: 60px;
    }

    .how-we-work-header .slider-text h3 {
        font-size: 22px;
    }

    .how-we-work .how-we-work-number span {
        font-size: 142px;
    }

    .what-crm-can-block strong {
        font-size: 22px;
    }

    .leave-application h2 {
        width: 79%;
    }

    .leave-application p {
        width: 79%;
    }
}

@media (min-width: 1200px) {

    .cms.problem:after {
        top: 8%;
        left: 59%;
    }

    .problem-body-block h3 {
        font-size: 26px;
    }

    .problem-body-block p  {
        font-size: 18px;
    }

    .problem-body-block > div {
        background: #F2F2F0;
        padding: 30px 25px 20px 25px;
        min-height: 100%;
        border-radius: 5px;
    }

    .problem-text-bottom strong {
        font-size: 26px;
        display: block;
    }

    .problem-text-bottom strong strong {
        font-size: 26px;
        font-weight: 800;
    }

    .why-our-crm {
        padding-top: 120px;
        padding-bottom:120px;
        margin-bottom: 0;
        background: #2D363D;
    }

    .why-our-crm h2 {
        font-size: 51px;
    }

    .why-our-crm p {
        font-size: 22px;
    }

    .why-our-crm ul li p {
        font-size: 26px;
    }

    .how-we-work .how-we-work-number span {
        font-size: 160px;
    }

    .how-we-work-header .slider-text h3 {
        font-size: 26px;
    }

    .how-we-work-header .slider-text p {
        font-size: 18px;
    }

    .what-crm-can {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .what-crm-can-block strong {
        font-size: 26px;
    }

    .what-crm-can-block {
        margin-top: 60px;
    }

    .what-crm-can-block p {
        font-size: 18px;
        margin-top: 20px;
        width: 80%;
    }

    .leave-application {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .leave-application h2 {
        font-size: 47px;
    }

    .leave-application p {
        font-size: 22px;
    }

}

@media (min-width: 1400px) {

    .cms.problem {
        padding-top: 115px;
        margin-top: 87px;
        padding-bottom: 170px;
    }

    .cms.problem:after {
        font-size: 260px;
    }

    .why-our-crm h2 {
        font-size: 61px;
    }

    .leave-application h2 {
        font-size: 47px;
    }

    .leave-application p {
        font-size: 22px;
    }

    .leave-application h2 {
        font-size: 50px;
    }

    .leave-application p {
        font-size: 22px;
        width: 55%;
    }

}


/*--- Project page*/

/* ---About system block --- */
.up-system-hero {
    background: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden; /* Ховаємо виліт ::before */
}

.up-system-hero::before {
    content: '';
    position: absolute;
    top: 120px;
    right: -80px;
    font-family: "Irpn", serif;
    font-size: 320px;
    font-weight: 900;
    line-height: 100%;
    color: transparent;
    -webkit-text-stroke: 1px #F2F2F0;
    z-index: 0;
    pointer-events: none;
}

.up-min-vh-700 { min-height: 700px; }
.up-hero-content { position: relative; z-index: 5; }

.up-h1 {
    font-family: "Irpn", serif;
    font-size: 58px;
    line-height: 68px;
    font-weight: 900;
    color: #272727;
    margin-bottom: 30px;
}

.up-text-orange { color: #E6743A; }

.up-p-main {
    font-size: 19px;
    line-height: 34px;
    color: #555;
    max-width: 580px;
}

/* Список елементів без GAP */
.up-feat-item {
    font-weight: 700;
    font-size: 15px;
    color: #272727;
}

.up-dot { color: #E6743A; margin-right: 8px; }

/* Зображення та декор */
.up-hero-visual { position: relative; z-index: 2; }
.up-shadow-premium { box-shadow: 0 40px 100px rgba(0,0,0,0.12); }
.up-radius-15 { border-radius: 15px; }

.up-cube-decor {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #E6743A;
    top: -40px;
    right: -40px;
    z-index: -1;
}

/* Відступи в PX */
.up-mb-15 { margin-bottom: 15px; }
.up-mb-25 { margin-bottom: 25px; }
.up-mb-40 { margin-bottom: 40px; }
.up-me-30 { margin-right: 30px; }
.up-mt-40 { margin-top: 40px; }
.up-mt-60 { margin-top: 60px; }

/* АНІМАЦІЇ */
@keyframes upFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes upRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.up-anim-float { animation: upFloat 6s infinite ease-in-out; }
.up-anim-rotate { animation: upRotate 20s infinite linear; }

/* АДАПТИВНІСТЬ */
@media (max-width: 991px) {
    .up-system-hero::before { font-size: 140px; top: 60px; right: 0; }
    .up-h1 { font-size: 34px; line-height: 44px; }
    .up-p-main { font-size: 16px; line-height: 28px; }
    .up-system-hero { padding-top: 80px; padding-bottom: 80px; }
    .up-me-30 { margin-right: 0; display: block; } /* На мобільних список в колонку */
}



/* --- Problem block --- */
.up-logistics-solutions {
    background-color: #F2F2F0; /* Світлий фон з вашої палітри */
}

.up-bg-light { background-color: #F2F2F0; }
.up-text-orange { color: #E6743A; }

.up-tag-orange-line {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    color: #E6743A;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.up-h2-massive-dark {
    font-family: "Irpn", serif;
    font-size: 52px;
    line-height: 62px;
    color: #272727;
    font-weight: 900;
}

.up-p-sub-grey {
    font-size: 20px;
    color: #3b3b3b;
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Grid Tiles */
.up-logistics-grid {
}

.up-log-tile {
    background-color: #ffffff;
    border-right: 1px solid #F2F2F0;
    border-bottom: 1px solid #F2F2F0;
    height: 400px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    background-image: radial-gradient(rgb(0 0 0 / 18%) 1px, transparent 1px);
    background-size: 20px 20px;
}

.up-log-content {
    padding: 60px 45px;
    height: 100%;
}


.up-log-digit {
    font-family: "Irpn", serif;
    font-size: 140px;
    font-weight: 900;
    color: #F2F2F0;
    position: absolute;
    top: 1px;
    right: 7px;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    transition: 0.4s ease;
}

.up-log-text {
    position: relative;
    z-index: 5;
}

.up-log-text h3 {
    font-size: 28px;
    font-weight: 800;
    font-family: "Irpn", serif;
    color: #272727;

    margin-bottom: 20px;
    transition: 0.3s;
}

.up-log-text p {
    font-size: 18px;
    line-height: 26px;
    color: #555;
}

/* INTERACTIVE EFFECTS */
.up-log-tile {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 0 rgba(63, 63, 63, 0.2); /* Тонка рамка всередині */
    z-index: 10;
}

.up-log-tile .up-log-digit {
    color: #e7e7e7;
    transform: translate(-10px, 10px);
}


@media(min-width: 1200px){

    .up-log-tile  {
        padding: 140px 70px;
    }

    .up-log-tile .up-log-text p {
        font-size: 22px;
        line-height: 150%;
    }

     .up-log-text h3 {
        font-size: 38px;
        margin-bottom: 20px;
        transition: 0.3s;
    }

}

/* Відступи */
.up-padding-y-100 { padding-top: 80px; padding-bottom: 60px; }
.mt-20-px { margin-top: 20px; }

/* АДАПТИВНІСТЬ */
@media (max-width: 991px) {
    .up-h2-massive-dark { font-size: 34px; line-height: 42px; }
    .up-log-tile { height: auto; min-height: 320px; border-right: none; }
    .up-log-digit { font-size: 100px; top: 0; right: 0; }
    .up-log-content { padding: 50px 40px; }
}

.up-solutions-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}

.up-h2-dark {
    font-family: "Irpn", serif;
    font-size: 48px;
    line-height: 58px;
    font-weight: 900;
    color: #272727;
}

.up-text-orange { color: #E6743A; }
.up-tag-orange { color: #E6743A; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 3px; }

/* Картка рішення */
.up-sol-item {
    background-color: #37393f;
    background-image: radial-gradient(rgb(248 248 248 / 19%) 1px, transparent 1px);
    background-size: 15px 15px;
    padding: 50px;
    height: 100%;
    border-radius: 0;
    transition: all 0.4s ease;
    border-left: 5px solid #E6743A;
}

.up-sol-head {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.up-sol-icon {
    font-family: "Irpn", serif;
    font-size: 24px;
    font-weight: 900;
    width: 60px;
    height: 60px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    color: #272727;
}

.up-sol-item h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.up-sol-body {
    position: relative;
}

.up-sol-action {
    font-size: 15px;
    line-height: 26px;
    color: #ffffff;
    margin-bottom: 15px;
}

.up-sol-result {
    font-size: 16px;
    line-height: 28px;
    color: #272727;
    font-weight: 600;
    padding-top: 15px;
    border-top: 1px solid #dcdcdc;
}



.bg-dark-px {
    background-color: #272727;
    border-left-color: #E6743A;
}

.icon-orange {
    background: #E6743A;
    color: #fff;
}

.text-white { color: #ffffff; }
.text-grey { color: #989891; }

/* Відступи в PX */
.up-mb-20-px {
    margin-bottom: 20px;
}

.up-mb-80-px {
    margin-bottom: 80px;
}

/* Адаптивність Mobile First */
@media (max-width: 991px) {
    .up-h2-dark { font-size: 32px; line-height: 42px; }
    .up-sol-item { padding: 35px 25px; }
    .up-sol-icon { width: 50px; height: 50px; font-size: 20px; margin-right: 15px; }
    .up-sol-item h3 { font-size: 20px; }
}

.up-status-was {
    font-size: 20px;
    color: #c5c4c4;
    margin-bottom: 8px;
    border-left: 2px solid #dcdcdc;
    padding-left: 15px;
    border-left: 2px solid #dcdcdc;
}

.up-sol-action {
    font-size:20px;
    font-weight: 500;
    color:#f48a5a;
    margin-bottom: 12px;
    margin-top: 15px;
}

.up-sol-result {
    border-top: 1px solid #dcdcdc;
    padding-top: 15px;
    font-size: 22px; /* Трохи більший шрифт для результату */
    color: #ffffff;
    font-weight: 700;
}


/* Whay we block */
.up-benefit-card {
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 2px solid #E6743A;
    height: 100%;
    transition: all 0.4s ease;
}


.up-benefit-val {
    font-family: "Irpn", serif;
    font-size: 38px; /* Трохи зменшив, щоб довші слова типу ROI влазили краще */
    font-weight: 900;
    color: #E6743A;
    margin-bottom: 20px;
    display: block;
}

.up-benefit-card h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.up-benefit-card p {
    color: #989891;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}



/* Before after block */

.scaling-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.scaling-item {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    background: #fdfdfd;
    transition: all 0.4s ease;
}


.scaling-before, .scaling-after {
    padding: 50px;
}

.scaling-before {
    background: #dcdfe3;
    text-align: right;
}


.scaling-before .label {
    background: #535353;
    color: #fff;
    padding: 2px 10px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 15px;
    display: inline-block;
}

.scaling-after .label {
    background: #E6743A;
    color: #fff;
    padding: 2px 10px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 15px;
    display: inline-block;
}

.scaling-before h3 {
    color: #151515;
    font-size: 22px;
    margin-bottom: 15px;
}
.scaling-after h3 {
    color: #272727;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 15px;
}

.scaling-before p { color: #999; font-size: 15px; }
.scaling-after p { color: #444; font-size: 16px; font-weight: 500; }

/* Розділювач з іконкою */
.scaling-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.scaling-divider .line {
    width: 1px;
    height: 100%;
    background: #eee;
    position: absolute;
}

.icon-pulse {
    width: 40px;
    height: 40px;
    background: #E6743A;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 0 0 rgba(230, 116, 58, 0.4);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(230, 116, 58, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(230, 116, 58, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(230, 116, 58, 0); }
}

/* Адаптивність */
@media (max-width: 991px) {
    .scaling-item { grid-template-columns: 1fr; }
    .scaling-divider { display: none; }
    .scaling-before { text-align: left; padding: 30px; }
    .scaling-after { padding: 30px; border-top: 1px solid #eee; }
}


/* What we made block */
.up-feature-box {
    background: #fff;
    padding: 25px;
    height: 100%;
    border-left: 4px solid rgba(238, 238, 238, 0.7);
    border-bottom: 4px solid rgba(238, 238, 238, 0.7);
    transition: all 0.4s ease;

}


.up-feature-head {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.up-feature-icon {
    font-size: 28px;
    color: #E6743A;
    margin-right: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF5F0;
}

.up-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.up-feature-list li {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #272727;
    background: #f2f2f0;
    padding: 4px 12px;
    letter-spacing: 0.5px;
}

.active-feature .up-feature-icon {
    background: #E6743A;
    color: #fff;
}





/* ---------------------- */
/*--- Sites page*/

.site-accent-text {
    color: #E6743A;
}

/* Блок 1: Hero (БІЛИЙ) */
.site-hero-white {
    padding-top: 140px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
}

.site-decor-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: #E6743A;
    opacity: 0.05;
    border-radius: 50%;
    top: -100px;
    right: -100px;
    z-index: 0;
}

.site-h1 {
    font-size: 36px;
    font-weight: 700;
    color: #2D363D;
    line-height: 1.1;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.site-hero-desc {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #444444;
}

.site-btn-orange {
    background-color: #E6743A;
    color: #ffffff;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(230, 116, 58, 0.3);
}

.site-main-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Блок 2: ТЕМНИЙ (#2D363D) */
.site-dark-section {
    background-color: #2D363D;
    padding-top: 100px;
    padding-bottom: 100px;
}

.site-h2-light {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 60px;
    text-align: center;
}

.site-card-dark {
    padding: 40px;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    height: 100%;
}

.site-icon-box {
    width: 50px;
    height: 50px;
    background-color: #E6743A;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: 25px;
}

.site-h3-orange {
    font-size: 22px;
    font-weight: 700;
    color: #E6743A;
    margin-bottom: 15px;
}

.site-p-light {
    font-size: 15px;
    color: #cccccc;
    line-height: 1.5;
    margin: 0;
}

/* Блок 3: Переваги (БІЛИЙ) */
.site-white-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.site-h2-dark {
    font-size: 40px;
    font-weight: 700;
    color: #2D363D;
    margin-bottom: 60px;
}

.site-h3-dark {
    font-size: 24px;
    font-weight: 700;
    color: #2D363D;
    margin-bottom: 15px;
}

.site-p-dark {
    font-size: 16px;
    color: #272727;
    line-height: 1.6;
}

.site-feature-box {
    border-top: 3px solid #E6743A;
    padding-top: 25px;
}

/* Блок 4: ПІДТРИМКА (СІРИЙ) */
.site-gray-section {
    background-color: #f8f9fa;
    padding-top: 100px;
    padding-bottom: 120px;
}

.site-support-img {
    width: 80%;
    border-radius: 50%;
    padding: 20px;
    border: 2px dashed #E6743A;
    margin:  0 auto;
}

.site-support-item {
    margin-bottom: 35px;
    padding-left: 20px;
    border-left: 2px solid #E6743A;
}


.syst-automatisation-banner {
    background: url('/img/design/bg-services.png') #F2F2F0 center bottom no-repeat;
    background-size: 100% ;
    min-height: 100vh;

}

/* =========================================
   Portfolio Section
   ========================================= */
.site-portfolio-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #F2F2F0;
}

.site-portfolio-card {
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 1px solid #eeeeee;
}

.site-portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.site-portfolio-img-wrap {
    position: relative;
    overflow: hidden;
}

.site-portfolio-img-wrap img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* Зум картинки при наведенні */
.site-portfolio-card:hover .site-portfolio-img-wrap img {
    transform: scale(1.05);
}

/* Оверлей з кнопкою */
.site-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(45, 54, 61, 0.7); /* Темний фон #2D363D з прозорістю */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.site-portfolio-card:hover .site-portfolio-overlay {
    opacity: 1;
}

.site-portfolio-fake-btn {
    background-color: #E6743A;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.site-portfolio-card:hover .site-portfolio-fake-btn {
    transform: translateY(0);
}

.site-portfolio-info {
    padding: 25px;
}

.site-portfolio-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: #E6743A;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.site-portfolio-title {
    font-size: 20px;
    font-weight: 700;
    color: #272727;
    margin: 0;
    transition: color 0.3s ease;
}

.site-portfolio-card:hover .site-portfolio-title {
    color: #E6743A;
}

/* Desktop styles */
@media (min-width: 992px) {
    .site-portfolio-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .site-portfolio-title {
        font-size: 22px;
    }
}

/* =========================================
   Blueprint Section
   ========================================= */
.site-blueprint-section {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.site-tag-orange {
    color: #E6743A;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.site-h2-blueprint {
    font-size: 36px;
    font-weight: 900;
    font-family: "Irpn", serif;
    line-height: 110%;
    color: #272727;
    margin-bottom: 25px;
}

.site-blueprint-desc {
    font-size: 17px;
    line-height: 170%;
    color: #555;
    margin-bottom: 30px;
}

.site-blueprint-list {
    list-style: none;
    padding: 0;
}

.site-blueprint-list li {
    font-size: 15px;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: #272727;
}

.site-blueprint-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 2px;
    background-color: #E6743A;
}

/* --- SVG Анімації --- */
.site-blueprint-visual {
    position: relative;
    padding: 20px;
}

.site-dynamic-svg {
    width: 100%;
    height: auto;
}

/* Анімація шарів */
@keyframes layerUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes layerDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

.anim-layer-up { animation: layerUp 5s ease-in-out infinite; }
.anim-layer-down { animation: layerDown 6s ease-in-out infinite; }

/* Анімація малювання ліній графіку */
.path-draw {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawLine 4s linear infinite;
}

@keyframes drawLine {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* Плавне плавання іконок */
.tech-icon-float { animation: layerUp 4s ease-in-out infinite; }
.tech-icon-float-delayed { animation: layerDown 5s ease-in-out infinite; }

/* Анімація ліній коду */
@keyframes codeFlow {
    0% { transform: translateX(-10px); opacity: 0; }
    20%, 80% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}

.code-anim-1 { animation: codeFlow 3s infinite; }
.code-anim-2 { animation: codeFlow 3s 0.5s infinite; }
.code-anim-3 { animation: codeFlow 3s 1s infinite; }

/* Desktop */
@media (min-width: 992px) {
    .site-blueprint-section {
        padding: 120px 0;
    }
    .site-h2-blueprint {
        font-size: 52px;
    }
    .site-blueprint-desc {
        font-size: 19px;
    }
}

/* =========================================
   Business Value Section (Заміна Blueprint)
   ========================================= */
.site-business-value-section {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.site-tag-orange {
    color: #E6743A;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.site-h2-blueprint {
    font-size: 36px;
    font-weight: 900;
    font-family: "Irpn", serif;
    line-height: 110%;
    color: #272727;
    margin-bottom: 25px;
}

.site-blueprint-desc {
    font-size: 16px;
    line-height: 170%;
    color: #555;
    margin-bottom: 30px;
}

.site-blueprint-list {
    list-style: none;
    padding: 0;
}

.site-blueprint-list li {
    font-size: 15px;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: #272727;
}

.site-blueprint-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 2px;
    background-color: #E6743A;
}

/* --- SVG Анімації для бізнес-блоку --- */
.site-blueprint-visual {
    position: relative;
    padding: 20px;
}

.site-dynamic-svg {
    width: 100%;
    height: auto;
}

@keyframes layerUpBusiness {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes layerDownBusiness {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

@keyframes pulseButton {
    0%, 100% { opacity: 0.8; transform: scale(1); transform-origin: 350px 247px; }
    50% { opacity: 1; transform: scale(1.05); transform-origin: 350px 247px; }
}

@keyframes drawSales {
    0% { stroke-dashoffset: 150; }
    50%, 100% { stroke-dashoffset: 0; }
}

.anim-layer-up { animation: layerUpBusiness 5s ease-in-out infinite; }
.anim-layer-down { animation: layerDownBusiness 6s ease-in-out infinite; }
.anim-pulse-btn { animation: pulseButton 3s ease-in-out infinite; }
.anim-float { animation: layerUpBusiness 4s ease-in-out infinite; }
.anim-float-delay { animation: layerDownBusiness 5s ease-in-out infinite; }

.path-draw-sales {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawSales 4s ease-out infinite alternate;
}

/* Desktop */
@media (min-width: 992px) {
    .site-business-value-section {
        padding: 120px 0;
    }
    .site-h2-blueprint {
        font-size: 46px;
    }
    .site-blueprint-desc {
        font-size: 18px;
    }
}


/* =========================================
   ERP: ЕКОСИСТЕМА (БЛОК 2)
   ========================================= */
.erp-ecosystem-visual {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #ffffff;
    overflow: hidden;
}

.erp-eco-text-col {
    padding-bottom: 40px;
}

.erp-visual-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-top: 20px;
    margin-bottom: 30px;
}

.erp-feature-mini {
    display: grid;
    grid-template-columns: 1fr;
}

.mini-item {
    border-left: 2px solid #E6743A;
    padding-left: 15px;
    margin-bottom: 20px;
}

.mini-item strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    color: #272727;
}

.mini-item p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #666;
}

.erp-interactive-svg-wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}


/* =========================================
   ERP: TECH CASES (БЛОК 3)
   ========================================= */
.erp-tech-cases {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #2D363D; /* Темний професійний фон */
}

.erp-cases-header {
    text-align: center;
    margin-bottom: 50px;
}

.erp-case-col {
    margin-bottom: 30px;
}

.tech-case-card {
    display: block;
    background-color: #1a1f24;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.tech-case-card:hover {
    transform: translateY(-8px);
    border-color: #E6743A;
}

/* Візуалізація мокапів інтерфейсу */
.tech-case-visual {
    background-color: #F2F2F0;
    height: 220px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.tech-case-visual.dark-theme {
    background-color: #272727;
}

.mockup-header {
    background: rgba(0,0,0,0.1);
    height: 24px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.tech-case-visual.dark-theme .mockup-header { background: rgba(255,255,255,0.05); }

.mockup-header .dot {
    width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
}
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.mockup-body {
    background: #ffffff;
    height: calc(100% - 24px);
    border-radius: 0 0 4px 4px;
    display: flex;
    padding: 15px;
}
.tech-case-visual.dark-theme .mockup-body { background: #1a1f24; }

/* Абстрактні елементи інтерфейсу */
.mockup-sidebar { width: 40px; background: #f0f0f0; border-radius: 4px; margin-right: 15px; }
.mockup-content { flex: 1; }
.mockup-chart { height: 60px; background: rgba(230, 116, 58, 0.2); border-radius: 4px; margin-bottom: 10px; }
.mockup-line { height: 10px; background: #e0e0e0; border-radius: 2px; margin-bottom: 8px; }
.mockup-line.short { width: 60%; }

.tech-case-visual.dark-theme .mockup-sidebar { background: #2D363D; }
.tech-case-visual.dark-theme .mockup-chart { background: rgba(138, 162, 171, 0.2); }
.tech-case-visual.dark-theme .mockup-line { background: #2D363D; }

/* Інфо частина картки */
.tech-case-info {
    padding: 30px;
}

.tech-case-badge {
    display: inline-block;
    background: rgba(230, 116, 58, 0.1);
    color: #E6743A;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.tech-case-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.tech-case-card:hover .tech-case-title {
    color: #E6743A;
}

.tech-case-desc {
    color: #989891;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.tech-case-stats {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    display: flex;
    flex-direction: column;
}

.tech-case-stats span {
    color: #ABA79E;
    font-size: 13px;
    margin-bottom: 5px;
}
.tech-case-stats strong {
    color: #ffffff;
}


/* =========================================
   ERP ALGORITHM: PROFESSIONAL FIX
   ========================================= */
.erp-algo-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #F2F2F0;
    overflow: hidden;
}

.erp-algo-header {
    text-align: center;
    margin-bottom: 50px;
}

.erp-algo-wrap {
    position: relative;
}

/* Центруємо весь контент всередині колонки */
.erp-algo-item {
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
    text-align: center;
}

.algo-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(5px);
    border: 2px solid #2D363D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #2D363D;
    margin: 0 auto 20px auto;
    transition: .3s;
}

.algo-title {
    font-size: 20px;
    font-weight: 800;
    color: #272727;
    margin-bottom: 15px;
}

.algo-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    background: transparent;
    backdrop-filter: blur(1px);
}

/* =========================================
   ВЕРТИКАЛЬНА ЛІНІЯ (MOBILE)
   ========================================= */
.erp-algo-col {
    position: relative;
}

.erp-algo-col::before {
    content: '';
    position: absolute;
    /* Робимо лінію строго по центру колонки */
    left: 50%;
    transform: translateX(-50%);
    top: 60px; /* Починається одразу під кружечком */
    width: 2px;
    height: 100%;
    background: #D9C9BC;
    z-index: 1;
}

/* Прибираємо лінію під останнім елементом */
.erp-algo-col:last-child::before,
.erp-algo-col:last-child::after {
    display: none;
}

/* Вертикальний імпульс, що біжить */
.erp-algo-col::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 60px;
    width: 4px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #E6743A, transparent);
    z-index: 1;
    animation: pulseVertical 4s infinite linear;
    opacity: 0;
}

@keyframes pulseVertical {
    0% { top: 60px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: calc(100% - 20px); opacity: 0; }
}

/* =========================================
   DESKTOP VERSION (min-width: 992px)
   ========================================= */
@media (min-width: 992px) {
    .erp-algo-section {
        padding-top: 120px;
        padding-bottom: 105px;
    }

    .erp-algo-header {
        margin-bottom: 80px;
    }

    .erp-algo-item {
        padding-bottom: 0;
    }

    .algo-circle {
        margin: 0 auto 30px auto;
    }

    /* Ховаємо вертикальні лінії на ПК */
    .erp-algo-col::before,
    .erp-algo-col::after {
        display: none;
    }

    /* Створюємо єдину ГОРИЗОНТАЛЬНУ лінію */
    .erp-algo-row {
        position: relative;
    }

    .erp-algo-row::before {
        content: '';
        position: absolute;
        top: 30px; /* Точно центр кружечка по висоті */
        /* В нас 4 колонки (по 25%). Центр першої = 12.5%. Центр останньої = 12.5% справа */
        left: 12.5%;
        right: 12.5%;
        height: 2px;
        background: repeating-linear-gradient(to right, #D9C9BC 0, #D9C9BC 10px, transparent 10px, transparent 20px);
        z-index: 1;
    }

    /* Анімований імпульс (горизонтально) */
    .erp-algo-row::after {
        content: '';
        position: absolute;
        top: 29px;
        left: 12.5%;
        width: 150px;
        height: 4px;
        background: linear-gradient(to right, transparent, #E6743A, #E6743A, transparent);
        z-index: 1;
        filter: blur(1px);
        animation: pulseHorizontal 6s infinite linear;
    }

    @keyframes pulseHorizontal {
        0% { left: 12.5%; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        /* Віднімаємо ширину лінії, щоб вона не виїжджала за краї */
        100% { left: calc(87.5% - 150px); opacity: 0; }
    }

    /* Ефект при наведенні (Hover) */
    .erp-algo-item:hover .algo-circle {
        background-color: #E6743A;
        border-color: #E6743A;
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(230, 116, 58, 0.4);
    }
}

/* =========================================
   ERP: CHALLENGES & SOLUTIONS GRID
   ========================================= */
.erp-challenges-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #ffffff;
}

.erp-challenges-header {
    text-align: center;
    margin-bottom: 50px;
}

/* CSS Grid для ідеального вирівнювання карток */
.erp-challenges-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px; /* Єдиний правильний спосіб робити відступи між картками */
}

/* Контейнер картки */
.challenge-card {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(230, 116, 58, 0.12);
    border-color: rgba(230, 116, 58, 0.5);
}

/* Зона проблеми (Верх) */
.challenge-problem {
    background-color: #F9F9F7;
    padding: 30px 25px 40px 25px; /* Більший відступ знизу для іконки */
    border-bottom: 1px dashed #D9C9BC;
    position: relative;
}

/* Зона рішення (Низ) */
.challenge-solution {
    background-color: #ffffff;
    padding: 35px 25px 30px 25px;
    flex-grow: 1; /* Змушує рішення тягнутися на всю висоту */
    position: relative;
    border-bottom: 4px solid transparent;
    transition: border-color 0.4s ease;
}

.challenge-card:hover .challenge-solution {
    border-bottom-color: #E6743A; /* Акцентна смужка при наведенні */
}


.c-arrow-icon svg {
    width: 16px;
    height: 16px;
}

.challenge-card:hover .c-arrow-icon {
    transform: translateY(3px); /* Стрілочка "вказує" вниз при наведенні */
    background-color: #2D363D;
}

/* Теги статусу */
.c-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.c-tag.task {
    background-color: #e0e0e0;
    color: #555555;
}

.c-tag.result {
    background-color: rgba(230, 116, 58, 0.1);
    color: #E6743A;
}

/* Типографіка */
.c-title {
    font-size: 18px;
    font-weight: 800;
    color: #272727;
    margin-bottom: 10px;
    line-height: 1.3;
}

.c-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

.erp-challenges-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #ffffff; /* Змінили на чисто білий для контрасту */
}

.challenge-card {
    background-color: #ffffff;
    border: 1px solid #d9d9d9; /* Зробили рамку трохи чіткішою */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Тінь тепер 0 0 (без зміщення), тому вона рівномірно виділяє і ВЕРХ картки */
    box-shadow: 0 0 30px rgba(45, 54, 61, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.challenge-card:hover {
    transform: translateY(-8px);
    /* Глибока тінь при наведенні також рівномірна з усіх боків */
    box-shadow: 0 0 40px rgba(230, 116, 58, 0.15);
    border-color: #E6743A;
}

.challenge-problem {
    background-color: #F2F2F0; /* Твій фірмовий сірий, який тепер ідеально виділяється на білому фоні секції */
    padding: 35px 25px 45px 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

/* Контейнер картки з посиленим виділенням */
.challenge-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* М'яка багаторівнева тінь */
    box-shadow: 0 10px 25px rgba(45, 54, 61, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.challenge-card:hover {
    transform: translateY(-8px);
    /* Глибока тінь при наведенні */
    box-shadow: 0 20px 40px rgba(230, 116, 58, 0.15);
    border-color: #E6743A;
}

/* Зона проблеми - робимо трохи темнішою для контрасту всередині картки */
.challenge-problem {
    background-color: #f2f2f0;
    padding: 35px 25px 45px 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

/* Зона рішення - ідеально біла */
.challenge-solution {
    background-color: #ffffff;
    padding: 40px 25px 35px 25px;
    flex-grow: 1;
    position: relative;
    border-bottom: 5px solid transparent;
    transition: border-color 0.3s ease;
}

.challenge-card:hover .challenge-solution {
    border-bottom-color: #E6743A;
}

/* Іконка переходу (стрілочка) - додаємо світіння */
.c-arrow-icon {
    position: absolute;
    top: -18px;
    left: 25px;
    width: 38px;
    height: 38px;
    background-color: #E6743A;
    border: 4px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(230, 116, 58, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.c-arrow-icon svg {
    width: 16px;
    height: 16px;
}

.challenge-card:hover .c-arrow-icon {
    transform: translateY(3px) scale(1.1);
    background-color: #2D363D;
}

/* Теги */
.c-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.c-tag.task {
    background-color: #2D363D;
    color: #ffffff;
}

.c-tag.result {
    background-color: rgba(230, 116, 58, 0.1);
    color: #E6743A;
}

/* Типографіка */
.c-title {
    font-size: 19px;
    font-weight: 800;
    color: #272727;
    margin-bottom: 12px;
    line-height: 1.3;
}

.c-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (min-width: 768px) {
    .erp-challenges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .erp-challenges-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .erp-challenges-header {
        margin-bottom: 80px;
    }

    .erp-challenges-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
    }

    .challenge-problem {
        padding: 45px 35px 55px 35px;
    }

    .challenge-solution {
        padding: 50px 35px 45px 35px;
    }

    .c-arrow-icon {
        left: 35px;
        width: 42px;
        height: 42px;
        top: -21px;
    }
}

/* =========================================
   DESKTOP RESPONSIVENESS
   ========================================= */
@media (min-width: 768px) {
    .erp-challenges-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
    }
}

@media (min-width: 1200px) {
    .erp-challenges-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .erp-challenges-header {
        margin-bottom: 70px;
    }

    .erp-challenges-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на великих екранах */
        grid-gap: 40px;
    }

    .challenge-problem {
        padding: 40px 30px 50px 30px;
    }

    .challenge-solution {
        padding: 45px 30px 40px 30px;
    }

    .c-arrow-icon {
        left: 30px;
    }
}

/*--- Automatisation systems page*/

.upsys-pain-solution-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}

.upsys-section-head {
    text-align: center;
    margin-bottom: 40px;
}

.upsys-section-head h2 {
    font-size: 32px;
    font-weight: 900;
    color: #2D363D;
    margin: 0 0 15px 0;
}

.upsys-section-head p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.upsys-accent {
    color: #E6743A;
}

/* 2. CSS Grid: Mobile First (1 колонка) */
.upsys-ps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* 3. Контейнер картки та 3D простір */
.upsys-ps-card {
    display: block;
    background-color: transparent;
    width: 100%;
    height: 320px; /* Фіксована висота для правильного перевороту */
    perspective: 1000px; /* Глибина 3D простору */
    cursor: pointer; /* Важливо для мобільних пристроїв, щоб спрацював клік/hover */

    /* Чиста CSS анімація появи (без JS) */
    opacity: 0;
    animation: upsysFadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Затримка появи для ефекту "Драбинки" */
.upsys-ps-card:nth-child(1) { animation-delay: 0.1s; }
.upsys-ps-card:nth-child(2) { animation-delay: 0.2s; }
.upsys-ps-card:nth-child(3) { animation-delay: 0.3s; }
.upsys-ps-card:nth-child(4) { animation-delay: 0.4s; }
.upsys-ps-card:nth-child(5) { animation-delay: 0.5s; }
.upsys-ps-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes upsysFadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 4. Внутрішній блок, що крутиться */
.upsys-ps-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружинний ефект */
    transform-style: preserve-3d;
}

/* Переворот при наведенні (на ПК) або кліку (на мобайл) */
.upsys-ps-card:hover .upsys-ps-inner,
.upsys-ps-card:active .upsys-ps-inner {
    transform: rotateY(180deg);
}

/* 5. Загальні стилі для сторін карток */
.upsys-ps-front,
.upsys-ps-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Ховаємо "спину", коли картка відвернута */
    border-radius: 16px;
    padding: 30px; /* Трохи менші відступи для мобільних */
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* 6. СТОРОНА: БІЛЬ (Лицьова - Темна) */
.upsys-ps-front {
    background-color: #2D363D;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.05);
}

.upsys-icon-warning {
    width: 40px;
    height: 40px;
    background-color: rgba(230, 116, 58, 0.15);
    color: #E6743A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 20px;
}

.upsys-ps-num {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    font-weight: 900;
    color: rgba(255,255,255,0.05);
    line-height: 1;
}

.upsys-pain-title {
    font-size: 20px;
    font-weight: 800;
    color: #E6743A;
    margin: 0 0 10px 0;
}

.upsys-ps-front p {
    font-size: 18px;
    color: #d7d4ce;
    line-height: 1.6;
    margin: 0;
}

/* 7. ПІДКАЗКА ДЛЯ МОБІЛЬНИХ (Пульсуюча) */
.upsys-flip-hint {
    margin-top: auto; /* Притискає підказку до самого низу */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #E6743A;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: upsysPulseHint 2s infinite;
}

.upsys-flip-icon {
    font-size: 16px;
    display: inline-block;
}

@keyframes upsysPulseHint {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* 8. СТОРОНА: РІШЕННЯ (Зворотна - Світла) */
.upsys-ps-back {
     background-image: radial-gradient(rgba(209, 209, 209, 0.6) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #2D363D;
    transform: rotateY(180deg); /* Спочатку розвернута задом наперед */
    border: 1px solid #E6743A;
}

.upsys-icon-check {
    width: 40px;
    height: 40px;
    background-color: rgba(115, 117, 115, 0.15);
    color: #E6743A; /* Зелений колір рішення */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
}

.upsys-solution-title {
    font-size: 20px;
    font-weight: 800;
    color: #2D363D;
    margin: 0 0 10px 0;
}

.upsys-ps-back p {
    font-size: 18px;
    color: #1e1e1e;
    line-height: 1.6;
    margin: 0;
}


/* =========================================
   МЕДІА-ЗАПИТИ (Desktop & Tablet)
   ========================================= */

/* Планшет Адаптація (2 колонки) */
@media (min-width: 768px) {
    .upsys-pain-solution-sec {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .upsys-ps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Десктоп Адаптація (3 колонки + більші відступи) */
@media (min-width: 992px) {
    .upsys-pain-solution-sec {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .upsys-section-head {
        margin-bottom: 60px;
    }
    .upsys-section-head h2 {
        font-size: 38px;
        margin-bottom: 15px;
    }
    .upsys-ps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .upsys-ps-front,
    .upsys-ps-back {
        padding: 40px 30px; /* Збільшуємо внутрішні відступи для ПК */
    }
}

/* 3. ГЛИБОКІ КЕЙСИ (Компактна структура 6 штук) */
.syst-deep-cases-compact {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #f7f7f5;
}

.syst-cases-grid {
    gap: 30px 0;
}

.syst-case-study {
    border-radius: 16px;
    border: 1px solid #E6743A;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.syst-case-study .row {
    height: 100%;
}
.syst-case-study:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
.syst-case-study.light { background-color: #ffffff; }
.syst-case-study.dark { background-color: #2D363D; border-color: transparent; }

.case-sidebar {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ebebeb;
}
.syst-case-study.dark .case-sidebar {
    background-color: #252c32;
    border-color: rgba(255,255,255,0.05);
}

.case-industry { font-size: 11px; font-weight: 800; color: #E6743A; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; display: block; }
.case-sidebar h3 {
    font-size: 22px;
    font-weight: 800;
    color: #2D363D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.syst-case-study.dark .case-sidebar h3 { color: #ffffff; }

.case-metrics { margin-top: auto; display: flex; flex-direction: column; gap: 15px; }
.metric strong { font-size: 28px; font-weight: 900; color: #E6743A; line-height: 1; display: block; }
.metric span { font-size: 12px; font-weight: 700; color: #ABA79E; text-transform: uppercase; margin-top: 5px; display: block; }

.case-content { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.case-block { margin-bottom: 25px; }
.case-block:last-child { margin-bottom: 0; }
.case-block h4 { font-size: 15px; font-weight: 800; color: #2D363D; margin: 0 0 10px 0; text-transform: uppercase; }
.syst-case-study.dark .case-block h4 { color: #ffffff; }
.case-block.problem h4 {
    color: #64686d;
}

.case-block.problem p {
    color:#747b83;
    font-size: 20px;
}

.case-block.solution p {
    color: #000000;
    font-size: 20px;
}

.case-block p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}
.syst-case-study.dark .case-block p {
    color: #9ea7ab;
}
.case-block.solution { padding-left: 15px; border-left: 3px solid #E6743A; }
.syst-case-study.dark .case-block.solution p { color: #e0e0e0; }


/* Desktop Adjustments */
@media (min-width: 992px) {
    .syst-architecture-dark { padding-top: 140px; padding-bottom: 140px; }
    .syst-arch-complex-grid { grid-template-columns: repeat(2, 1fr); }

    /* Робимо 1 і 4 блоки широкими (на два стовпці) для складної сітки */
    .wide-box { grid-column: span 2; flex-direction: row; align-items: center; }
    .wide-box.reverse { flex-direction: row-reverse; }
    .wide-box .arch-visual { width: 40%; height: 100%; min-height: 200px; border-right: 1px solid rgba(255,255,255,0.05); }
    .wide-box.reverse .arch-visual { border-right: none; border-left: 1px solid rgba(255,255,255,0.05); }
    .wide-box .arch-content { width: 60%; padding: 50px; }
}
/* DESKTOP ADAPTATION */
@media (min-width: 992px) {
     .syst-deep-cases-compact { padding-top: 100px; padding-bottom: 100px; }
    .syst-vision-metrics { border-left: 1px solid #ddd; padding-left: 50px; }
    .case-sidebar { border-right: 1px solid #eeeeee; border-bottom: none; }
    .syst-case-study.dark .case-sidebar { border-right-color: rgba(255,255,255,0.05); }
    .syst-comp-panel { padding: 80px 60px; }
    .timeline-line { display: block; }
    .timeline-step { margin-bottom: 0; }
}



/* =========================================
   UPSYS B2B PREMIUM WOW-DESIGN
   ========================================= */

/* Загальні налаштування */
.upsys-accent { color: #E6743A; }
.upsys-text-white { color: #ffffff; }
.upsys-tag { display: inline-block; padding: 6px 14px; background: rgba(230, 116, 58, 0.1); color: #E6743A; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; border-radius: 4px; margin-bottom: 20px; }
.upsys-sec-head { margin-bottom: 60px; }
.upsys-sec-head h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: #2D363D; margin: 0 0 15px 0; }
.upsys-sec-head p { font-size: 18px; color: #666; max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* 1. МЕТАФОРА (Fluid Split Screen) */
/* =========================================
   1. СУТЬ ПРОСТОЮ МОВОЮ (Компактний дизайн)
   ========================================= */

.upsys-metaphor-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color:#fcfcfc;
    position: relative;
    overflow: hidden;
}

/* Красивий фон: Точкова сітка + Помаранчеве світіння */
/* Красивий фон: Точкова сітка */
.upsys-premium-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgb(0 0 0 / 18%) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}

/* Помаранчеве світіння (Тепер воно видиме) */

/* Insight Картка */
.upsys-metaphor-card {
    background-color: #ffffff;
    border: 4px solid #E6743A;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
    position: relative;
    z-index: 2;
}

.upsys-metaphor-card .upsys-tag {
    margin-bottom: 30px;
}

.upsys-metaphor-title {
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 900;
    color: #2D363D;
    line-height: 1.3;
    margin: 0;
}

.upsys-metaphor-body {
    padding-left: 40px;
    border-left: 1px solid #e0dddc;
}

.upsys-metaphor-body p {
    font-size: 18px;
    color: #2D363D;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.upsys-metaphor-body p:last-child {
    margin-bottom: 0;
}

/* Акцент на останньому абзаці */
.upsys-metaphor-highlight {
    font-size: 18px !important;
    color: #2D363D !important;
    font-weight: 600!important;
}

.upsys-metaphor-highlight strong {
    color: #E6743A;
    font-weight: 800;
}

@media (max-width: 991px) {

    .upsys-metaphor-card { padding: 40px 30px; }
    .upsys-metaphor-title { margin-bottom: 30px; }
    .upsys-metaphor-body { padding-left: 0; border-left: none; }
}

@media (min-width: 992px) {
    .upsys-metaphor-body p {
        font-size: 20px;
    }
}

/* =========================================
   5. КРОКИ РОБОТИ (Зациклені анімації + Mobile First)
   ========================================= */

.upsys-roadmap-sec {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #ffffff;
}

.upsys-section-head { text-align: center; margin-bottom: 60px; }
.upsys-section-head h2 { font-size: clamp(32px, 4vw, 42px); font-weight: 900; color: #2D363D; margin: 0 0 15px 0; }
.upsys-section-head p {
    font-size: 22px;
    color: #2b2a2a;
    margin: 0;
}

/* ================== ЛІНІЯ ТА ТОЧКИ (Mobile First) ================== */
.upsys-roadmap-wrapper {
    position: relative;
    padding-left: 0;
}

.upsys-roadmap-track {
    position: absolute;
    top: 0;
    left: 7px; /* Вертикальна лінія зліва */
    width: 4px;
    height: 100%;
    background-color: #eeeeee;
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}

/* Енергетичний імпульс по лінії */
.upsys-roadmap-pulse-line {
    position: absolute;
    top: -100px; left: 0; width: 100%; height: 100px;
    background: linear-gradient(to bottom, transparent, #E6743A, transparent);
    animation: upsysFlowVertical 3s linear infinite;
}

@keyframes upsysFlowVertical {
    0% { top: -100px; }
    100% { top: 100%; }
}

/* Обгортка кроку (відступи між картками на мобільному) */
.upsys-roadmap-item {
    position: relative;
    margin-bottom: 40px; /* Саме цей відступ не дає їм злипнутися */
    padding-left: 45px;  /* Відступ для лінії та кружечка */
}
.upsys-roadmap-item:last-child { margin-bottom: 0; }

/* Точки (Кружечки) */
.upsys-roadmap-point {
    position: absolute;
    left: 6px;  /* Точно на лінії */
    top: 30px;
    width: 32px; height: 32px;
    background-color: #ffffff;
    border: 4px solid #eeeeee;
    border-radius: 50%; z-index: 2;
    animation: upsysPointBreath 3s infinite alternate ease-in-out;
}

.upsys-roadmap-item:nth-child(1) .upsys-roadmap-point { animation-delay: 0s; }
.upsys-roadmap-item:nth-child(2) .upsys-roadmap-point { animation-delay: 0.5s; }
.upsys-roadmap-item:nth-child(3) .upsys-roadmap-point { animation-delay: 1s; }
.upsys-roadmap-item:nth-child(4) .upsys-roadmap-point { animation-delay: 1.5s; }

@keyframes upsysPointBreath {
    0% { border-color: #eeeeee; box-shadow: 0 0 0 rgba(230, 116, 58, 0); }
    100% { border-color: #E6743A; box-shadow: 0 0 15px rgba(230, 116, 58, 0.6); }
}

/* ================== КАРТКА ТА АНІМОВАНІ ІКОНКИ ================== */
.upsys-roadmap-card {
    background-color: #1a1f24;
    border-radius: 16px;
    padding: 35px 25px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 3;
}

.upsys-roadmap-card:hover { transform: translateY(-5px) translateX(5px); box-shadow: 0 20px 40px rgba(230, 116, 58, 0.15); }

.upsys-roadmap-num {
    position: absolute;
    top: -3px;
    right: 10px;
    font-size: 100px;
    font-weight: 900;
    color: #ffffff0f;
    line-height: 1;
    pointer-events: none;
}

.upsys-roadmap-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 2;
}
.upsys-roadmap-card p {
    font-size: 18px;
    color: #cbc8c8;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Анімації іконок */
.upsys-step-icon { width: 50px; height: 50px; margin-bottom: 25px; display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 2; }

.upsys-anim-chat { display: flex; gap: 6px; }
.upsys-anim-chat span { width: 8px; height: 8px; background-color: #E6743A; border-radius: 50%; animation: upsysChatBounce 1.5s infinite ease-in-out; }
.upsys-anim-chat span:nth-child(2) { animation-delay: 0.2s; }
.upsys-anim-chat span:nth-child(3) { animation-delay: 0.4s; }
@keyframes upsysChatBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-8px); opacity: 1; } }

.upsys-anim-scan { width: 40px; height: 40px; border: 2px solid rgba(230,116,58,0.3); border-radius: 8px; position: relative; overflow: hidden; }
.upsys-scan-line { width: 100%; height: 2px; background-color: #E6743A; position: absolute; top: 0; left: 0; box-shadow: 0 2px 10px #E6743A; animation: upsysScanMove 2s infinite linear; }
@keyframes upsysScanMove { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }

.upsys-anim-gears { position: relative; width: 40px; height: 40px; }
.upsys-gear { position: absolute; border: 3px dashed #E6743A; border-radius: 50%; }
.upsys-gear.g1 { width: 28px; height: 28px; top: 0; left: 0; animation: upsysGearSpin 4s infinite linear; }
.upsys-gear.g2 { width: 18px; height: 18px; bottom: 0; right: 0; border-color: rgba(230,116,58,0.5); animation: upsysGearSpinRev 3s infinite linear; }
@keyframes upsysGearSpin { 100% { transform: rotate(360deg); } }
@keyframes upsysGearSpinRev { 100% { transform: rotate(-360deg); } }

.upsys-anim-launch { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.upsys-launch-core { width: 14px; height: 14px; background-color: #E6743A; border-radius: 50%; z-index: 2; }
.upsys-launch-wave { position: absolute; width: 100%; height: 100%; border: 2px solid #E6743A; border-radius: 50%; animation: upsysLaunchPulse 2s infinite cubic-bezier(0.165, 0.84, 0.44, 1); }
@keyframes upsysLaunchPulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* =========================================
   ДЕСКТОП ЛЕЙАУТ (Від 992px)
   ========================================= */
@media (min-width: 992px) {
    .upsys-roadmap-sec {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .upsys-roadmap-wrapper { margin-top: 60px; }

    /* Трек прогресу стає горизонтальним */
    .upsys-roadmap-track { top: 20px; left: 0; width: 100%; height: 4px; }

    .upsys-roadmap-pulse-line {
        top: 0; left: -150px; width: 150px; height: 100%;
        background: linear-gradient(to right, transparent, #E6743A, transparent);
        animation: upsysFlowHorizontal 3s linear infinite;
    }
    @keyframes upsysFlowHorizontal { 0% { left: -150px; } 100% { left: 100%; } }

    /* Скидаємо відступи колонки до стандартних */
    .upsys-roadmap-item {
        margin-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left; }

    /* Центруємо кружечок по горизонталі над карткою */
    .upsys-roadmap-point { left: 0; right: 0; top: 6px; margin: 0 auto; }

    .upsys-roadmap-card { margin-top: 50px; height: calc(100% - 50px); }
    .upsys-roadmap-card:hover { transform: translateY(-10px); }
}

/* 3. КЕЙСИ */
.upsys-stories-sec { padding: 100px 0; background-color: #f7f7f5; }
.upsys-stories-grid { gap: 30px 0; }
.upsys-story-card { display: flex; flex-direction: column; background: #fff; padding: 40px; border-radius: 16px; border: 1px solid #eee; text-decoration: none; height: 100%; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.upsys-story-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: #E6743A; }
.upsys-story-card h3 { font-size: 20px; font-weight: 900; color: #2D363D; margin: 0 0 20px 0; border-bottom: 1px solid #eee; padding-bottom: 15px; transition: color 0.3s; }
.upsys-story-card:hover h3 { color: #E6743A; }
.upsys-before, .upsys-after { font-size: 14px; line-height: 1.6; color: #555; margin-bottom: 15px; }
.upsys-after { color: #272727; font-weight: 500; }
.upsys-cross { color: #ff5f56; font-weight: 800; }
.upsys-check { color: #27c93f; font-weight: 800; }
.upsys-fake-btn { margin-top: auto; display: inline-block; padding: 10px 20px; background: #f2f2f0; color: #555; font-size: 13px; font-weight: 800; border-radius: 6px; text-align: center; transition: 0.3s; text-transform: uppercase; }
.upsys-story-card:hover .upsys-fake-btn { background: #E6743A; color: #fff; }

/* 4. ЦЕНТРАЛЬНИЙ МОЗОК (Fluid Dark) */

.upsys-neural-brain-sec {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #f7f7f5;
}

.upsys-brain-box {
    background-color: #2D363D; /* Дуже глибокий темний колір, майже чорний */
    padding: 60px;

    position: relative;
    overflow: hidden;
}

.upsys-brain-text {
    position: relative;
    z-index: 5;
}

.upsys-brain-text h2 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.2;
}

.upsys-brain-text p {
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 19px;
    color: #d6d6d6;
}

/* Контейнер для візуалу */
.upsys-neural-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

/* Canvas, де працює JS */
#upsys-neural-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* ================== ЦЕНТРАЛЬНЕ ЯДРО ================== */
.upsys-core-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}

.upsys-core-text {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1px;
    position: relative;
    z-index: 5;
    text-shadow: 0 0 10px rgba(230,116,58,0.8);
}

/* Анімовані кільця навколо UP.SYS */
.upsys-core-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid transparent;
}

.upsys-core-ring.r-1 {
    width: 100px; height: 100px;
    border-top-color: #E6743A;
    border-bottom-color: #E6743A;
    animation: upsysSpinNetwork 4s linear infinite;
}

.upsys-core-ring.r-2 {
    width: 130px; height: 130px;
    border-left-color: rgba(230,116,58,0.5);
    border-right-color: rgba(230,116,58,0.5);
    border-style: dashed;
    animation: upsysSpinNetworkRev 8s linear infinite;
}

/* Пульсуюче світіння ядра */
.upsys-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(230,116,58,0.4) 0%, rgba(230,116,58,0) 70%);
    border-radius: 50%;
    animation: upsysCorePulse 2s ease-in-out infinite alternate;
}

@keyframes upsysSpinNetwork { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes upsysSpinNetworkRev { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes upsysCorePulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; box-shadow: 0 0 20px rgba(230,116,58,0.2); }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; box-shadow: 0 0 50px rgba(230,116,58,0.8); }
}

/* ================== ВУЗЛИ (Модулі) ================== */
.upsys-node-label {
    position: absolute;
    background: rgba(72, 73, 81, 0.42);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(2px);
    transition: 0.3s ease;

}

/* Розміщення по колу (Гексагон) */
.upsys-node-label.n-1 { top: 10%; left: 50%; }       /* База даних */
.upsys-node-label.n-2 { top: 25%; left: 85%; }       /* Фінанси */
.upsys-node-label.n-3 { top: 75%; left: 85%; }       /* Звіти */
.upsys-node-label.n-4 { top: 90%; left: 50%; }       /* Контроль */
.upsys-node-label.n-5 { top: 75%; left: 15%; }       /* Дзвінки */
.upsys-node-label.n-6 { top: 25%; left: 15%; }       /* Контакти */

/* Мобільна адаптація */
@media (max-width: 991px) {
    .upsys-brain-box { padding: 40px 20px; }
    .upsys-brain-text { text-align: center; margin-bottom: 50px; }
    .upsys-node-label { padding: 6px 10px; font-size: 10px; }
    .upsys-core-hub { transform: translate(-50%, -50%) scale(0.8); }
}


/* 4.5 ОСТАННІ РОЗРОБЛЕНІ СИСТЕМИ (Fluid Showcase) */
.upsys-showcase-fluid {
    background: #fff;
    padding-top: 100px;
}
.upsys-showcase-header { margin-bottom: 60px; }
.upsys-showcase-header h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: #2D363D; margin: 0; }
.upsys-showcase-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; transition: 0.4s; position: relative; }
.upsys-showcase-card.dark-mode {
    background: #2D363D;
    color: #fff;
}
.upsys-showcase-card.light-mode {
    background: #c6baad;
    color: #2D363D;
}
.upsys-showcase-card.gray-mode {
    background: #3f4953;
    color: #ffffff;
}
.upsys-showcase-content {
    padding: 40px;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}
.upsys-cat {
    font-size: 11px;
    font-weight: 800;
    color: #E6743A;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.upsys-showcase-card h3 { font-size: 32px; font-weight: 900; margin: 0 0 20px 0; transition: 0.3s; }
.upsys-showcase-card.dark-mode h3 { color: #fff; }
.upsys-showcase-card.light-mode h3 { color: #2D363D; }
.upsys-showcase-card:hover h3 { color: #E6743A; }
.upsys-showcase-card p { font-size: 16px; line-height: 1.6; margin: 0 0 30px 0; }
.upsys-showcase-card.dark-mode p {
    color: #ffffff;
}
.upsys-showcase-card.light-mode p {
    color:#2D363D;
}
.upsys-showcase-card .upsys-fake-btn { background: transparent; border: 2px solid #E6743A; color: #E6743A; }
.upsys-showcase-card:hover .upsys-fake-btn { background: #E6743A; color: #fff; }
.upsys-showcase-abstract { height: 200px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 60px 40px 0; opacity: 0.5; transition: 0.4s; }
.upsys-showcase-card:hover .upsys-showcase-abstract { opacity: 1; transform: scale(1.05); }
.upsys-ui-box { width: 150px; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }
.ui-line { height: 6px; background: rgba(255,255,255,0.2); margin-bottom: 10px; border-radius: 3px; }
.ui-line.accent { background: #E6743A; }
.upsys-ui-graph { display: flex; align-items: flex-end; gap: 10px; height: 100px; }
.ui-bar { width: 20px; background: rgba(0,0,0,0.1); border-radius: 4px 4px 0 0; }
.ui-bar.h-1 { height: 40%; } .ui-bar.h-2 { height: 80%; } .ui-bar.h-3 { height: 60%; }
.ui-bar.accent { background: #E6743A; }

/* 5. КРОКИ РОБОТИ */
.upsys-steps-sec { padding: 100px 0; background-color: #ffffff; }
.upsys-steps-wrapper { position: relative; margin-top: 40px; }
.upsys-progress-bar { position: absolute; left: 25px; top: 0; bottom: 0; width: 4px; background: #eee; z-index: 1; }
.upsys-progress-fill { width: 100%; height: 0%; background: #E6743A; transition: height 0.1s; }
.upsys-step-box { padding-left: 60px; position: relative; margin-bottom: 40px; }
.upsys-step-dot { position: absolute; left: 12px; top: 0; width: 30px; height: 30px; background: #fff; border: 3px solid #2D363D; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; z-index: 2; font-size: 14px; }
.upsys-step-box h3 { font-size: 20px; font-weight: 800; margin: 0 0 10px 0; color: #2D363D; }
.upsys-step-box p { font-size: 14px; color: #666; line-height: 1.6; margin: 0; }

/* =========================================
   6. КОМПАКТНЕ ПОРІВНЯННЯ
   ========================================= */
.upsys-compact-compare {
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: #ffffff;
}

.upsys-comp-card {
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Картка "Готова програма" */
.upsys-comp-card.bad {
    background-color: #f7f7f5;
    border: 2px dashed #dddddd;
}

.upsys-comp-card.bad h3 {
    color: #2D363D;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.upsys-comp-card.bad p {
    color: #666666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.upsys-comp-card.good {
    background-color: #1a1f24;
    border: 2px solid #E6743A;
    box-shadow: 0 20px 40px rgba(230,116,58,0.15);
    transform: scale(1.05);
}

.upsys-comp-card.good h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.upsys-comp-card.good p {
    color: #ABA79E;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.upsys-suit-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px auto;
    border-radius: 12px;
}
.upsys-suit-icon.bad { background: repeating-linear-gradient(45deg, #eee, #eee 10px, #ddd 10px, #ddd 20px); border: 2px dashed #aaa; }
.upsys-suit-icon.good { background: #E6743A; }

/* Бейдж VS */
.upsys-vs-badge {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 2px solid #eeeeee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #ccc;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 2;
}

/* =========================================
   7. ФІНАЛЬНИЙ СПЛІТ-БЛОК (Безпека + CTA)
   ========================================= */
.upsys-final-split-sec {
    padding-top: 50px;
    padding-bottom: 100px;
    background-color: #ffffff;
}

.upsys-action-card {
    padding: 60px 50px;
    border-radius: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Картка Безпеки */
.upsys-action-card.dark {
    background-color: #1a1f24;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.upsys-shield-icon {
    width: 50px;
    height: 60px;
    border: 3px solid #E6743A;
    border-radius: 0 0 30px 30px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}
.upsys-shield-icon::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 20px; height: 200%;
    background: rgba(255,255,255,0.3); transform: rotate(45deg);
    animation: upsysShieldGlint 3s infinite;
}

.upsys-action-card.dark h3 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 15px;
}

.upsys-action-card.dark p {
    font-size: 16px;
    color: #ABA79E;
    line-height: 1.7;
    margin: 0;
}

/* Картка CTA (Гаманець) */
.upsys-action-card.orange {
    background-color: #E6743A;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(230,116,58,0.3);
}

.upsys-wallet-icon {
    width: 50px;
    height: 40px;
    background-color: #1a1f24;
    border-radius: 8px;
    margin-bottom: 25px;
    position: relative;
}
.upsys-wallet-icon::after {
    content: ''; position: absolute; top: 15px; right: -5px; width: 15px; height: 10px;
    background-color: #ffffff; border-radius: 2px;
}

.upsys-action-card.orange h3 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 15px;
}

.upsys-action-card.orange p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 30px 0;
    opacity: 0.9;
}

/* Кнопка на помаранчевому фоні */
.upsys-btn-dark {
    display: inline-block;
    padding: 18px 36px;
    background-color: #1a1f24;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: 0.3s ease;
    align-self: flex-start; /* Кнопка не розтягується на всю ширину */
}

.upsys-btn-dark:hover {
    background-color: #2D363D;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* =========================================
   6. ПОРІВНЯННЯ (СПЛІТ-ПАНЕЛЬ)
   ========================================= */
.upsys-compare-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}

.upsys-compare-panel {
    border-radius: 24px;
    overflow: hidden; /* Важливо, щоб обрізати кути внутрішніх блоків */
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.upsys-vs-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border: 2px solid #eeeeee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #cccccc;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.upsys-comp-half {
    padding: 80px 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.upsys-comp-half.bad {
    background-color: #ffffff;
}

.upsys-comp-half.bad h3 {
    color: #2D363D;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 15px;
}

.upsys-comp-half.bad p {
    color: #666666;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
}

.upsys-comp-half.good {
    background-color: #1a1f24;
}

.upsys-comp-half.good h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 15px;
}

.upsys-comp-half.good p {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
}

/* Іконки костюмів */
.upsys-suit-icon { width: 60px; height: 60px; margin: 0 auto 25px auto; border-radius: 12px; }
.upsys-suit-icon.bad { background: repeating-linear-gradient(45deg, #eee, #eee 10px, #ddd 10px, #ddd 20px); border: 2px dashed #aaa; }
.upsys-suit-icon.good { background: #E6743A; box-shadow: 0 10px 20px rgba(230,116,58,0.3); }

/* =========================================
   7. ФІНАЛЬНИЙ БАНЕР (Асиметричний)
   ========================================= */
.upsys-cta-sec {
    padding-bottom: 100px;
    background-color: #ffffff;
    padding-top: 100px;
}

.upsys-cta-banner {
    background-color: #E6743A;
    border-radius: 24px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(230,116,58,0.25);
}

.upsys-cta-wave-bg {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}

.upsys-cta-content {
    padding-right: 40px;
}

.upsys-wallet-icon {
    width: 50px; height: 40px; background-color: #1a1f24; border-radius: 8px; margin-bottom: 25px; position: relative;
}
.upsys-wallet-icon::after {
    content: ''; position: absolute; top: 15px; right: -5px; width: 15px; height: 10px; background-color: #ffffff; border-radius: 2px;
}

.upsys-cta-content h2 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
}

.upsys-cta-content p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 35px;
    opacity: 0.9;
}

.upsys-btn-dark:hover {
    background-color: #2D363D;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Вкладена картка безпеки */
.upsys-security-badge {
    background-color: #1a1f24;
    border-radius: 20px;
    padding: 40px;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
}

.upsys-shield-icon {
    width: 40px; height: 48px; border: 3px solid #E6743A; border-radius: 0 0 24px 24px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.upsys-shield-icon::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 15px; height: 200%; background: rgba(255,255,255,0.3); transform: rotate(45deg); animation: upsysShieldGlint 3s infinite;
}

@keyframes upsysShieldGlint { 0% { left: -50%; } 20% { left: 150%; } 100% { left: 150%; } }

.upsys-security-badge h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
}

.upsys-security-badge p {
    font-size: 18px;
    color: #d4d4d4;
    line-height: 1.6;
    margin: 0;

}
.upsys-compare-sec {
    background-color: #f7f7f5;
    background-image: radial-gradient(rgba(209, 209, 209, 0.6) 1px, transparent 1px);
    background-size: 20px 20px;
}
/* =========================================
   МОБІЛЬНА АДАПТАЦІЯ
   ========================================= */
@media (max-width: 767px) {
    /* На мобільному кружок VS зникає, бо блоки стають один під одним */
    .upsys-vs-circle { display: none; }
    .upsys-comp-half { padding: 40px 30px; }
    .upsys-cta-banner { padding: 40px 20px; }
    .upsys-cta-content { padding-right: 0; text-align: center; margin-bottom: 40px; }
    .upsys-wallet-icon { margin: 0 auto 20px auto; }
    .upsys-security-badge { text-align: center; }
    .upsys-shield-icon { margin: 0 auto 20px auto; }
}

/* =========================================
   МОБІЛЬНА АДАПТАЦІЯ
   ========================================= */
@media (max-width: 991px) {
    .upsys-comp-card { padding: 40px 25px; }
    .upsys-comp-card.good { transform: scale(1); margin-top: 20px; }
    .upsys-action-card { padding: 40px 30px; }
    .upsys-action-card.dark h3, .upsys-action-card.orange h3 { font-size: 26px; }
    .upsys-btn-dark { width: 100%; } /* На мобайлі кнопка на всю ширину */
}

/* 8. CTA */
.upsys-cta-final-sec { padding: 120px 0; background-color: #E6743A; position: relative; overflow: hidden; }
.upsys-cta-final-sec h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; margin: 0 0 20px 0; }
.upsys-cta-final-sec p { font-size: 18px; max-width: 800px; margin: 0 auto 40px auto; line-height: 1.6; opacity: 0.9; }
.upsys-btn-shake { display: inline-block; padding: 20px 40px; background: #2D363D; color: #fff; font-size: 18px; font-weight: 900; text-transform: uppercase; border-radius: 12px; text-decoration: none; animation: upsysShakeBtn 5s infinite; transition: 0.3s; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.upsys-btn-shake:hover { background: #1a1f24; color: #E6743A; transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); animation: none; }
@keyframes upsysShakeBtn { 0%, 90% { transform: translate3d(0, 0, 0); } 92% { transform: translate3d(-5px, 0, 0); } 94% { transform: translate3d(5px, 0, 0); } 96% { transform: translate3d(-5px, 0, 0); } 98% { transform: translate3d(5px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
.upsys-cta-wave { position: absolute; bottom: -50px; left: -10%; width: 120%; height: 200px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 70%); z-index: 1; pointer-events: none; }

/* ДЕСКТОП АДАПТАЦІЯ */
@media (min-width: 992px) {
    .upsys-meta-text-col { padding: 120px 80px; justify-content: flex-end; }
    .upsys-meta-visual-col { padding: 120px 80px; justify-content: flex-start; }

    .upsys-pain-grid { grid-template-columns: repeat(2, 1fr); }
    .upsys-pain-grid a:nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }

    .upsys-progress-bar { left: 0; right: 0; top: 30px; bottom: auto; width: 100%; height: 4px; }
    .upsys-progress-fill { width: 0%; height: 100%; transition: width 0.1s; }
    .upsys-step-box { padding-left: 15px; padding-top: 60px; text-align: center; margin-bottom: 0; }
    .upsys-step-dot { left: 50%; top: 17px; transform: translateX(-50%); }


}

@media (min-width: 1200px) {
    .upsys-showcase-content {
        padding: 70px;
    }

    .upsys-showcase-card p {
        font-size: 22px;
    }
}


/* =========================================
   8. РЕАЛІЗОВАНІ СИСТЕМИ (Bento Grid)
   ========================================= */

/* Базовий фон із позиціонуванням для ефектів */
.upsys-portfolio-sec {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #252b31; /* Трохи світліший за суцільний чорний, щоб патерн читався */
    position: relative;
    overflow: hidden; /* Щоб світіння не вилазило за межі секції */
}

/* 1. Преміальний патерн: Точкова сітка (Dot Grid) */
.upsys-portfolio-sec::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Створюємо крапки за допомогою радіального градієнта */
    background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
    background-size: 24px 24px; /* Відстань між крапками */
    z-index: 0;
}

/* 2. Ambient Glow: М'яке помаранчеве світіння знизу зліва */
.upsys-portfolio-sec::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(230,116,58,0.08) 0%, transparent 70%);
    pointer-events: none; /* Щоб світіння не блокувало кліки по картках */
    z-index: 0;
}

/* Піднімаємо весь контент над фоновими ефектами */
.upsys-portfolio-sec .container {
    position: relative;
    z-index: 2;
}

/* Заголовки перефарбовуємо під темний фон */
.upsys-portfolio-sec .upsys-section-head h2 {
    color: #ffffff;
}
.upsys-portfolio-sec .upsys-section-head p {
    color: #ABA79E;
}

/* Mobile First: 1 колонка */
.upsys-portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Картка-посилання */
.upsys-portfolio-card {
    display: flex;
    flex-direction: column;
    background-color: #3f4953;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 35px 30px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* Світіння при наведенні (Wow-ефект) */
.upsys-portfolio-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(230,116,58,0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.upsys-portfolio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230,116,58,0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(230,116,58,0.1);
}

.upsys-portfolio-card:hover::before {
    opacity: 1;
}

/* Теги (Категорії) */
.upsys-portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.upsys-ptag {
    font-size: 11px;
    font-weight: 800;
    color: #E6743A;
    background-color: rgba(230,116,58,0.1);
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Тексти карток */
.upsys-portfolio-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.upsys-portfolio-card:hover h3 {
    color: #E6743A;
}

.upsys-portfolio-card p {
    font-size: 16px;
    color: #d4d4d4;
    line-height: 1.6;
    margin: 0 0 30px 0;
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

.upsys-portfolio-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(230, 116, 58, 0.5);
    padding-top: 20px;
    position: relative;
    z-index: 2;
}

.upsys-portfolio-link {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.upsys-portfolio-card:hover .upsys-portfolio-link {
    color: #E6743A;
}

.upsys-portfolio-arrow {
    font-size: 20px;
    color: #555;
    transition: transform 0.4s ease, color 0.4s ease;
}

.upsys-portfolio-card:hover .upsys-portfolio-arrow {
    color: #E6743A;
    transform: translateX(10px);
}

/* Кнопка під сіткою */
.upsys-portfolio-action {
    text-align: center;
    margin-top: 50px;
}

.upsys-btn-outline {
    display: inline-block;
    padding: 18px 40px;
    background-color: transparent;
    color: #E6743A;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #E6743A;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.upsys-btn-outline:hover {
    background-color: #E6743A;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(230,116,58,0.2);
}

/* =========================================
   АДАПТАЦІЯ (Планшет і Десктоп)
   ========================================= */

@media (min-width: 768px) {
    /* На планшеті 2 колонки */
    .upsys-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (min-width: 992px) {
    .upsys-portfolio-sec {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .upsys-section-head {
        margin-bottom: 80px;
    }

    /* На ПК 3 колонки */
    .upsys-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .upsys-portfolio-action {
        margin-top: 80px;
    }
}

/*--- *Services page*/

.usrv-head {
    text-align: center;
    margin-bottom: 40px;
}

.usrv-head h2 {
    font-size: 40px;
    color: #2D363D;
    margin: 0 0 15px 0;
    font-weight: 900;
}
.usrv-head p {
    font-size: 20px;
    color: #2D363D;
    margin: 0;
    font-weight: 500;
}
.usrv-head-light h2 { color: #ffffff; }
.usrv-head-light p {
      color: #E6743A;
}
.usrv-accent { color: #E6743A; }

/* =========================================
   1. ЕКСПЕРТИЗИ (Картки з анімаціями)
   ========================================= */
.usrv-expertise-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff; /* Дуже світлий фон */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* =========================================
   ФОН СЕКЦІЇ ТА ПЛОСКІ КВАДРАТИ
   ========================================= */
.usrv-expertise-sec {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff; /* М'який фон, щоб білі картки виділялися */
    overflow: hidden; /* Ховаємо квадрати, які вилазять за краї */
}

/* Контейнер для карток має бути над фоном */
.usrv-expertise-sec .relative-z {
    position: relative;
    z-index: 5;
}

/* Контейнер для квадратів */
.usrv-bg-squares {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Щоб не блокували кліки по картках */
    z-index: 1;
}

/* Базові стилі плоских квадратів */
.usrv-square {
    position: absolute;
    /* Згладжування руху для паралаксу */
    transition: transform 0.1s ease-out;
}

/* Кольори та позиції (як на скріншотах UP STUDIO) */
.s-orange {
    width: 300px;
    height: 300px;
    background-color: rgba(196, 172, 153, 0);
    border: 10px solid rgba(196, 172, 153, 0.1);
    top: 20%;
    left:3%;
}
.s-blue {
    width: 120px;
    height: 120px;
    background-color: #8BA1AB;
    top: 70%;
    left: 5%;
}
.s-beige {
    width: 160px;
    height: 160px;
    background-color: #D6C7B8;
    bottom: 3%;
    right: 3%;
}
.s-gray {
    width: 680px;
    height: 680px;
    background-color: rgba(218, 218, 218, 0.25);
    top: 5%;
    right: 5%;
    opacity: 1;

}

.s-orange-light { width: 50px; height: 50px; background-color: #E6743A; top: 45%; right: 25%; opacity: 0.5; }

/* Адаптив під мобілки (зменшуємо квадрати) */
@media (max-width: 991px) {
    .s-orange {
        width: 80px;
        height: 80px;
        top: 3%;
        background: #ededed;
        border: none;
    }
    .s-beige {
        width: 100px;
        height: 100px;
        bottom: 10%;
        right: 0;
    }
    .s-blue { width: 60px; height: 60px; left: -10px; }
    .s-gray {
        width: 80px;
        height: 80px;
        background-color: rgba(218, 218, 218, 0.39);
        top: 1%;
        right: 5%;
        opacity: 1;
    }
}

/* =========================================
   ВИПРАВЛЕНІ КАРТКИ (Білі та непрозорі)
   ========================================= */

.usrv-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.usrv-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E5E5;
    background-color: #ffffff;
    background-image: radial-gradient(circle, rgba(56, 74, 96, 0.08) 1px, transparent 0);
    background-size: 20px 20px;
    border-radius: 0;
    padding: 20px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 2; /* Щоб карта точно була над фігурами фону */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.usrv-card:hover {
    transform: translateY(-5px); /* Картка "підіймається" */
    border-color: rgba(230, 116, 58, 1);
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.12); /* Тінь оранжева напівпрозора */
}

.usrv-card:hover .ups-card-btn {
    color: #E6743A;
}

.usrv-card:hover .ups-btn-arrow {
    background-color: #E6743A;
    color: #FFFFFF;
    transform: translateX(10px);
}

.usrv-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 5;
}

.usrv-content h3 {
    font-size: 50px;
    font-weight: 900;
    color: #2D363D;
    margin: 0 0 15px 0;
    transition: color 0.3s ease;
    font-family: "Irpn", serif;
}

.usrv-card:hover .usrv-content h3 {
    color: #E6743A;
}
.usrv-content-top {
    font-size: 18px;
    color: #2D363D;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

.usrv-content .usrv-content-top strong {
    font-weight: 900;
}


.usrv-content-top .usrv-content-top-header {
    font-size: 20px;
    color: #E6743A;
    line-height: 1.6;
    display: block;
    font-weight: 900;

}

.usrv-content p strong {
    font-weight: 600;
}

.usrv-content strong span {
    font-weight: 900;
    color: #E6743A;
    font-size: 18px;
}

.usrv-content h4 {
    font-weight: 700;
    color: #E6743A;
    font-size: 18px;

}

.usrv-content ul{
    padding-left: 0;
}

.usrv-content ul li {
    font-size: 18px;
    color: #2D363D;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
    margin-bottom: 15px;
    list-style: none;
    position: relative;
    padding-left: 19px;
}

.usrv-content ul li:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 1px;
    background: #E6743A;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
}

.usrv-content ul li strong {
    font-size: 16px;
    color: #2D363D;
    font-weight: 800;
    display: block;
}

.usrv-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;

    margin-top: auto;
    flex-grow: 0;
}
.usrv-btn { font-size: 13px; font-weight: 800; color: #2D363D; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; }
.usrv-arrow { font-size: 20px; color: #888; transition: transform 0.4s ease, color 0.4s ease; }
.usrv-card:hover .usrv-btn, .usrv-card:hover .usrv-arrow { color: #E6743A; }
.usrv-card:hover .usrv-arrow { transform: translateX(10px); }


.usrv-anim-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.6; transition: transform 0.8s ease, opacity 0.5s ease; }
.usrv-card:hover .usrv-anim-bg { opacity: 1; transform: scale(1.05); }


.usrv-neuron {
    position: absolute;
    background: #E6743A;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(230,116,58,0.2);
    animation: uFloat 4s infinite alternate ease-in-out;
}

.usrv-neuron.n1 { width: 12px; height: 12px; top: 10%; right: 15%; }
.usrv-neuron.n2 { width: 20px; height: 20px; bottom: 20%; right: 5%; animation-delay: -2s; }
.usrv-neuron.n3 { width: 8px; height: 8px; top: 40%; right: 40%; animation-delay: -3s; }
.usrv-conn { position: absolute; top: 15%; right: 10%; width: 3px; height: 50%; background: linear-gradient(to bottom, transparent, rgba(230,116,58,0.8), transparent); transform: rotate(25deg); animation: uPulseLine 2s infinite alternate; }
@keyframes uFloat { 0% { transform: translate(0, 0); } 100% { transform: translate(-30px, 20px); } }
@keyframes uPulseLine { 0% { opacity: 0.2; } 100% { opacity: 1; } }

/* =========================================
   Анімація 2: Глобальна Синхронізація (ERP)
   ========================================= */
.usrv-erp-sec-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px; /* Глибина для 3D */
}

/* Центральне ядро синхронізації */
.usrv-sync-core {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 60px;
    height: 60px;
    background-color: #E6743A;
    border-radius: 50%;
    box-shadow: 0 0 0px 15px rgba(230, 116, 58, 0.3);
    z-index: 3;
    transition: all 0.5s ease;
}

.usrv-card:hover .usrv-sync-core {
    transform: scale(1.1);
    background-color: #E6743A;
    box-shadow: 0 0 0 30px rgba(230,116,58,.6);
}

/* Вузли-департаменти */
.usrv-sync-node {
    position: absolute;
    width: 10px; height: 10px;
    background-color: #ABA79E;
    border-radius: 50%;
    z-index: 2;
    animation: usrvNodeFloat 5s infinite alternate ease-in-out;
}

/* Налаштування вузлів на уявній сфері */
.usrv-sync-node.n1 { top: 20%; left: 20%; animation-delay: 0s; }
.usrv-sync-node.n2 { top: 20%; right: 20%; animation-delay: -1s; }
.usrv-sync-node.n3 { bottom: 20%; left: 20%; animation-delay: -2s; }
.usrv-sync-node.n4 { bottom: 20%; right: 20%; animation-delay: -3s; }
.usrv-sync-node.n5 { top: 50%; left: -10px; width: 15px; height: 15px; animation-delay: -4s; }

/* Лінії синхронізації (імпульси) */
.usrv-sync-node::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150px; /* Довжина променя до ядра */
    height: 2px;
    background: linear-gradient(to right, transparent, #E6743A, transparent);
    opacity: 0.3;
    animation: usrvPulseBeam 3s infinite linear;
}

/* Анімація "Дихання" вузлів */
@keyframes usrvNodeFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    100% { transform: translate(-10px, 10px) scale(1.2); opacity: 1; }
}

/* Анімація імпульсу синхронізації */
@keyframes usrvPulseBeam {
    0% { transform: translate(-50%, -50%) rotate(45deg) translateX(-100px); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(45deg) translateX(100px); opacity: 0; }
}

/* При наведенні політ стає швидшим (White-Glove Сервіс) */
.usrv-card:hover .usrv-sync-node::after {
    animation-duration: 1.5s;
    opacity: 0.6;
}

/* Анімація 3: Орбіти */
.usrv-orbit {
    position: absolute;
    top: -84px;
    right: -73px;
    border-radius: 50%;
    border: 3px dashed rgba(230,116,58,0.5);
}

.usrv-orbit.o1 {
    width: 300px;
    height: 300px;
    animation: uSpin 15s linear infinite;
}

.usrv-orbit.o2 {
    width: 180px;
    height: 180px;
    top: -29px;
    right: -14px;
    border-style: dotted;
    border-color: rgba(230,116,58,0.8);
    animation: uSpinRev 10s linear infinite;
}
.usrv-hub { position: absolute;
    top: 45px;
    right: 56px;
    width: 30px;
    height: 30px;
    background: #E6743A;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(230,116,58,0.2);
}
@keyframes uSpin { 100% { transform: rotate(360deg); } }
@keyframes uSpinRev { 100% { transform: rotate(-360deg); } }


/* =========================================
   Анімація 4: Екосистема конверсій (В КУТІ)
   ========================================= */
.usrv-sites-mesh {
    display: block; /* Знімаємо центрування flex-ом */
}

/* Якір у правому верхньому куті */
.usrv-mesh-position {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 0;
    height: 0;
    z-index: 1;
}

/* Пунктирна орбіта (стильно обрізається краями картки) */
.usrv-site-ring {
    position: absolute;
    top: -118px;
    left: -120px;
    width: 240px;
    height: 240px;
    border: 2px dashed rgba(230, 116, 58, 0.4);
    border-radius: 50%;
    animation: uSpinRing 20s linear infinite;
    z-index: 1;
}

/* Ядро */
.usrv-site-core {
    position: absolute;
    top: -23px;
    left: -19px;
    width: 40px;
    height: 40px;
    background: #1a1f24;
    border: 6px solid #E6743A;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(230, 116, 58, 0.2);
    z-index: 3;
    transition: all 0.4s ease;
}

/* Пульсація ядра */
.usrv-site-core::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -4px; margin-left: -4px; /* Точне центрування */
    width: 8px; height: 8px;
    background: #E6743A;
    border-radius: 50%;
    animation: uCoreBeat 1.5s infinite alternate;
}

/* Лінії-канали */
.usrv-site-path {
    position: absolute;
    top: -1px;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(230,116,58,0.3) 80%, transparent);
    transform-origin: 0 50%;
    z-index: 2;
}

/* Оскільки ядро в куті, лінії йдуть вліво і вниз екрана */
.usrv-site-path.p1 { transform: rotate(105deg); }
.usrv-site-path.p2 { transform: rotate(140deg); }
.usrv-site-path.p3 { transform: rotate(175deg); }

/* Крапки (Ліди) */
.usrv-lead-node {
    position: absolute;
    top: -3px;
    width: 8px; height: 8px;
    background: #efefef;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #E6743A;
    animation: uLeadFlow 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.usrv-site-path.p1 .usrv-lead-node { animation-delay: 0s; }
.usrv-site-path.p2 .usrv-lead-node { animation-delay: 1.2s; }
.usrv-site-path.p3 .usrv-lead-node { animation-delay: 2.4s; }

/* Ховери */
.usrv-card:hover .usrv-site-core {
    border-color: #ffffff;
    box-shadow: 0 0 30px 10px #E6743A;
    transform: scale(1.2);
}
.usrv-card:hover .usrv-lead-node {
    animation-duration: 1.5s;
    background: #E6743A;
}
.usrv-card:hover .usrv-site-ring {
    border-color: rgba(230,116,58,0.8);
}

/* Анімації */
@keyframes uSpinRing { 100% { transform: rotate(360deg); } }
@keyframes uCoreBeat { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 1; } }
@keyframes uLeadFlow {
    0% { left: 100%; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; transform: scale(1.2); }
    80% { opacity: 1; }
    100% { left: 0%; opacity: 0; transform: scale(0.5); }
}

/* =========================================
   2. ФІЛОСОФІЯ БІЗНЕСУ
   ========================================= */
.usrv-values-sec { padding-top: 60px; padding-bottom: 60px; background-color: #121519; }
.usrv-val-col { margin-bottom: 20px; }
.usrv-val-col:last-child { margin-bottom: 0; }
.usrv-val-card { background-color: #1a1f24; border: 1px solid rgba(255,255,255,0.03); border-radius: 20px; padding: 50px 40px; height: 100%; position: relative; overflow: hidden; transition: 0.4s ease; }
.usrv-val-glow { position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(230,116,58,0.2) 0%, transparent 70%); border-radius: 50%; transition: 0.6s ease; }
.usrv-val-card:hover { border-color: rgba(230,116,58,0.3); transform: translateY(-5px); }
.usrv-val-card:hover .usrv-val-glow { transform: scale(2); opacity: 0.6; }
.usrv-val-card h3 { font-size: 24px; font-weight: 800; color: #ffffff; margin: 0 0 20px 0; position: relative; z-index: 2; }
.usrv-val-card p {
    font-size: 18px;
    color: #d2d2d2;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* =========================================
   3. ПЕРЕВАГИ (Дашборд)
   ========================================= */
.usrv-benefits-sec {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #ffffff;
}
.usrv-ben-col { margin-bottom: 20px; }
.usrv-ben-col:last-child { margin-bottom: 0; }
.usrv-ben-card {
    background-color: #f5f6f7;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    transition: 0.3s ease;
}
.usrv-ben-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); background-color: #ffffff; }

.usrv-ui-badge { display: inline-flex; align-items: center; gap: 12px; background-color: #1a1f24; padding: 12px 16px; border-radius: 10px; margin-bottom: 25px; }
.usrv-ui-badge span { font-size: 13px; font-weight: 800; color: #ffffff; font-family: monospace; letter-spacing: 1px; }

.usrv-ui-pulse { width: 10px; height: 10px; background-color: #27c93f; border-radius: 50%; box-shadow: 0 0 10px rgba(39, 201, 63, 0.5); animation: uPulseUi 2s infinite alternate; }
@keyframes uPulseUi { 0% { opacity: 0.5; } 100% { opacity: 1; transform: scale(1.1); } }

.usrv-ui-track { width: 40px; height: 6px; background-color: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.usrv-ui-fill { width: 0%; height: 100%; background-color: #E6743A; animation: uLoadUi 3s infinite; }
@keyframes uLoadUi { 0% { width: 0%; } 50%, 100% { width: 100%; } }

.usrv-ui-trend { align-items: flex-end; }
.usrv-bar { width: 6px; background-color: #E6743A; border-radius: 2px; }
.usrv-bar.b1 { height: 8px; opacity: 0.4; } .usrv-bar.b2 { height: 12px; opacity: 0.6; } .usrv-bar.b3 { height: 18px; opacity: 0.8; } .usrv-bar.b4 { height: 24px; opacity: 1; }

.usrv-ben-card h3 {
    font-size: 20px; font-weight: 800; color: #2D363D; margin: 0 0 15px 0; }
.usrv-ben-card p {
    font-size: 18px;
    color: #313131;
    line-height: 1.6;
    margin: 0; }

/* =========================================
   4. ПРОЦЕС РОБОТИ
   ========================================= */
.usrv-process-sec {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f5f6f7;
}
.usrv-proc-col { margin-bottom: 20px; }
.usrv-proc-col:last-child { margin-bottom: 0; }
.usrv-proc-card { background-color: #ffffff; border-radius: 20px; padding: 40px 30px; height: 100%; transition: 0.4s ease; }
.usrv-proc-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.usrv-step { display: inline-block; padding: 6px 12px; background-color: rgba(230,116,58,0.1); color: #E6743A; font-size: 12px; font-weight: 800; text-transform: uppercase; border-radius: 6px; margin-bottom: 20px; }
.usrv-proc-card h3 { font-size: 22px; font-weight: 800; color: #2D363D; margin: 0 0 15px 0; }
.usrv-proc-card p {
    font-size: 18px;
    color: #313131;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   5. CTA
   ========================================= */
.usrv-cta-sec { padding-top: 60px; padding-bottom: 80px; background-color: #ffffff; }
.usrv-cta-box { background-color: #1a1f24; border-radius: 24px; padding: 60px 30px; text-align: center; position: relative; overflow: hidden; }
.usrv-cta-glow { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; background: radial-gradient(circle, rgba(230,116,58,0.3) 0%, transparent 60%); pointer-events: none; }
.usrv-cta-box h2 { font-size: 32px; font-weight: 900; color: #ffffff; margin: 0 0 15px 0; position: relative; z-index: 2; }
.usrv-cta-box p { font-size: 16px; color: #ABA79E; line-height: 1.6; margin: 0 auto 30px auto; max-width: 600px; position: relative; z-index: 2; }
.usrv-btn-action { display: inline-block; padding: 18px 40px; background-color: #E6743A; color: #ffffff; font-size: 15px; font-weight: 800; text-transform: uppercase; border-radius: 12px; text-decoration: none; transition: 0.3s ease; position: relative; z-index: 2; }
.usrv-btn-action:hover { background-color: #d1622c; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(230,116,58,0.4); }

/* =========================================
   ДЕСКТОП АДАПТАЦІЯ (Від 992px)
   ========================================= */
@media (min-width: 992px) {
    .usrv-head { margin-bottom: 60px; }
    .usrv-head h2 { font-size: 42px; }

    .usrv-expertise-sec { padding-top: 100px; padding-bottom: 100px; }
    .usrv-col { margin-bottom: 30px; }
    .usrv-card { padding: 50px 40px; }

    .usrv-values-sec { padding-top: 100px; padding-bottom: 100px; }
    .usrv-val-col { margin-bottom: 0; }

    .usrv-benefits-sec { padding-top: 100px; padding-bottom: 100px; }
    .usrv-ben-col { margin-bottom: 0; }
    .usrv-ben-card { padding: 50px 40px; }

    .usrv-process-sec { padding-top: 100px; padding-bottom: 100px; }
    .usrv-proc-col { margin-bottom: 0; }

    .usrv-cta-sec { padding-top: 80px; padding-bottom: 120px; }
    .usrv-cta-box { padding: 80px; }
    .usrv-cta-box h2 { font-size: 42px; }

    .usrv-card {
        padding: 40px;

    }

    .usrv-content-top .usrv-content-top-header {
        font-size: 22px;

    }

}

@media (min-width: 1200px) {
    .usrv-content p {
        font-size: 19px;
    }

    .usrv-content p strong span{
        font-size: 21px;
    }

    .usrv-content strong span{
        font-size: 20px;
    }

}

@media (min-width: 1600px) {
    .usrv-content p {
        font-size: 20px;
    }

}

/* Project page*/

.project-banner {
    position: relative;
    background: #494c54;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
}

.project-banner h1 {
    color: #ffffff;
    font-size: 34px;
}
/* Налаштування Canvas */
#usrv-canvas-physics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Контент поверх фону */
.project-banner .banner {
    position: relative;
    z-index: 10;
}

.project-banner p{
    color: #ff7939;
    font-size: 22px;
    position: relative;
    z-index: 5;
}

.project-banner-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.project-square {
    position: absolute;
    transition: transform 0.5s ease-out;
}

.project-square-teal {
    width: 250px;
    height: 250px;
    background-color: #8BA1AB;
    top: -50px;
    left: -80px;
    opacity: 1;
}

.project-square-orange {
    width: 150px;
    height: 150px;
    background-color: #E6743A;
    top: 40%;
    left: 10%;
    opacity: 1;
}

.project-square-beige {
    width: 350px;
    height: 350px;
    background-color: #62564e;
    bottom: -100px;
    right: 5%;
    opacity: 1;
}

.project-square-gray {
    width: 100px;
    height: 100px;
    background-color: #7c8186;
    top: 15%;
    right: 15%;
    opacity: 1;
}

.project-square-orange-sm {
    width: 60px;
    height: 60px;
    background-color: #3a698d;
    bottom: 20%;
    right: 30%;
}
.up-features-wrap{
    padding: 100px 0;
    background-color: #F9F9F7;
}

.anim-reveal-up p {
    font-size: 20px;
    color: #494c54;
}

.anim-reveal-bottom h3   {
    font-size: 26px;
    font-weight: 900;
    font-family: "Irpn", serif;
    margin-bottom: 0;
    transform: translateY(2px);

}
.anim-reveal-bottom p {
    font-size: 20px;
    color: #272727;
    margin-bottom: 15px;
}

.up-scaling-wrap {
    padding: 100px 0;
    background-color: #efefef;
}

.up-benefits-wrap {
    padding: 120px 0;
    background-color: #272727;
}

.up-benefits h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}
.up-benefits p{
    color: #ffffff;
    font-size: 18px;
}

.up-benefits-p {
    color: #ffffff;
    font-size: 22px;
}
@media (max-width: 991px) {
    .project-square-teal { width: 120px; height: 120px; }
    .project-square-beige { width: 160px; height: 160px; bottom: -40px; }
    .project-square-orange { display: none; }
}

@media (min-width: 768px) {

    .project-banner h1 {
        font-size: 50px;
    }

    .project-banner p {
        font-size: 26px;
    }
}

@media (min-width:992px) {

    .project-banner h1 {
        font-size: 60px;
    }

    .anim-reveal-bottom .up-feature-box{
        padding: 30px;

    }
}

@media (min-width:1200px) {



    .project-banner p {
        font-size: 30px;
    }

    .anim-reveal-bottom p {
        font-size: 20px;
    }

    .anim-reveal-bottom .up-feature-box{
        padding: 45px;

    }

}

/*Contacts page*/
.up-contact-premium {
    background-color: #FAFAFA;
    color: #222222;
    position: relative;
    overflow: hidden;
}

.up-text-accent {
    color: #E6743A;
}

.relative-z {
    position: relative;
    z-index: 2;
}

.up-hero-elegant {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    background: #FAFAFA;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border-bottom: 1px solid #E5E5E5;
}

.up-hero-elegant h1 {
    color: #272727;
    margin-left: 0;
}

.up-title-huge {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    font-family: "Irpn", serif;
    color: #272727;
}

.up-subtitle-elegant {
    font-size: 20px;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
}

.up-square-1,
.up-square-2,
.up-square-3,
.up-square-4,
.up-square-5,
.up-square-6 {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 0;
    pointer-events: none;
    animation: stitchIn 0.8s ease-out both;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Colors (Diverse spread) */
.up-square-1 { background: #E3DFD5; } /* Beige */
.up-square-2 { background: #E6743A; } /* Orange */
.up-square-3 { background: #989891; } /* Grey */
.up-square-4 { background: #989891; } /* Grey */
.up-square-5 { background: #E6743A; } /* Orange */
.up-square-6 { background: #E3DFD5; } /* Beige */

/* Mobile grid coordinates */
/* Right side stairs step pattern */
.up-square-1 { top: 50px; right: 100px; animation-delay: 0.1s; }
.up-square-2 { top: 100px; right: 50px; animation-delay: 0.2s; }
.up-square-4 { top: 150px; right: 150px; animation-delay: 0.3s; }
.up-square-5 { top: 200px; right: 100px; animation-delay: 0.4s; }

/* Left side stairs step pattern */
.up-square-3 { bottom: 50px; left: 50px; animation-delay: 0.5s; }
.up-square-6 { bottom: 100px; left: 100px; animation-delay: 0.6s; }

/* Hover rotations for Contacts hero banner */
.up-hero-elegant:hover .up-square-1,
.up-hero-elegant:hover .up-square-3,
.up-hero-elegant:hover .up-square-5 {
    transform: rotate(45deg);
}

.up-hero-elegant:hover .up-square-2,
.up-hero-elegant:hover .up-square-4,
.up-hero-elegant:hover .up-square-6 {
    transform: rotate(-45deg);
}

/* Адаптивність */
@media (min-width: 992px) {
    .up-hero-elegant {
        padding-top: 200px;
        padding-bottom: 200px;
    }

    .up-title-huge {
        font-size: 72px;
        line-height: 80px;
    }

    .up-square-1,
    .up-square-2,
    .up-square-3,
    .up-square-4,
    .up-square-5,
    .up-square-6 {
        width: 80px;
        height: 80px;
    }

    /* Desktop grid coordinates */
    /* Right side */
    .up-square-1 { top: 80px; right: 160px; }
    .up-square-2 { top: 160px; right: 80px; }
    .up-square-4 { top: 240px; right: 240px; }
    .up-square-5 { top: 320px; right: 160px; }

    /* Left side */
    .up-square-3 { bottom: 80px; left: 80px; }
    .up-square-6 { bottom: 160px; left: 160px; }
}

/* --- 2. КОНТАКТИ (СВІТЛИЙ БЛОК З WOW-ЕФЕКТОМ) --- */
.upc-contacts-light-wrap {
    padding-bottom: 100px;
    background-color: #FAFAFA;
}

.upc-contacts-info-side {
    padding-right: 40px;
    position: relative;
}

/* Декоративний анімований SVG */
.upc-svg-decor-wrap {
    width: 60px;
    height: 60px;
    margin-bottom: 40px;
}

/* Повільне обертання та пульсація */
.upc-spin-slow {
    animation: rotateSquareLeft 20s linear infinite;
    transform-origin: center;
}

.upc-pulse {
    animation: upsPulse 3s infinite;
}

/* Величезний заголовок (H1/H2 стиль) */
.upc-title-huge {
    font-size: 48px; /* Буде збільшено на десктопі */
    font-weight: 700;
    line-height: 56px;
    margin-bottom: 24px;
    color: #222222;
}

.upc-text-elegant {
    font-size: 18px;
    color: #777777;
    margin-bottom: 40px;
    line-height: 1.6;
}

.upsc-elegant-card {
    padding: 40px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    text-decoration: none;
    color: #222222;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.upsc-elegant-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(230, 116, 58, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.upsc-elegant-card:hover::before {
    opacity: 1;
}

/* Тонка лінія при наведенні */
.upsc-elegant-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 4px;
    background-color: #E6743A;
    transition: width 0.4s ease;
}

.upsc-elegant-card:hover::after {
    width: 60px;
}

.upsc-elegant-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
    transform: translateY(-5px);
}

/* Елементи карток */
.upsc-card-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999999;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}

/* Анімована крапка біля лейбла */
.upc-dot-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #E6743A;
    border-radius: 50%;
    margin-right: 12px;
    transform: translateY(-2px);
    animation: upsPulse 2s infinite;
}

/* Велика анімована SVG іконка */
.upsc-card-icon-svg {
    width: 48px;
    height: 48px;
    margin-bottom: 40px;
}

/* --- АНІМАЦІЇ ДЛЯ ІКОНОК --- */
/* E-mail: промальовування контуру */
.upc-mail-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: upsMailDraw 4s infinite;
}

@keyframes upsMailDraw {
    0%, 100% { stroke-dashoffset: 50; }
    50% { stroke-dashoffset: 0; }
}

/* Телефон: вібрація */
.upc-phone-vibrate {
    transform-origin: center;
    animation: upsPhoneVibrate 0.5s ease-in-out infinite alternate;
}

@keyframes upsPhoneVibrate {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* Telegram: левітація літачка */
.upc-tg-plane {
    animation: upsTgLeap 3s ease-in-out infinite;
}

@keyframes upsTgLeap {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5px, -5px); }
}

/* Робот: пульсація антени */
.upc-bot-pulse {
    animation: upsPulse 1.5s infinite;
}

/* Текст значення картки */
.upsc-card-value {
    font-size: 22px;
    font-weight: 500;
    margin-top: auto; /* Притискає до низу без HTML класів */
    margin-bottom: 20px;
}

/* Адаптивність (Десктоп) */
@media (min-width: 992px) {
    .upc-contacts-light-wrap {
        padding-bottom: 140px;
    }

    .upc-title-huge {
        font-size: 64px;
        line-height: 72px;
    }
}

/* --- СВІТЛИЙ БЛОК КОНТАКТІВ --- */
.ups-light-contacts {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #FAFAFA;
}

.ups-light-info {
    padding-right: 0;
    margin-bottom: 40px;
}

.ups-light-title {
    font-size: 42px;
    font-weight: 400;
    line-height: 52px;
    color: #222222;
    margin-bottom: 24px;
}

.ups-light-descr {
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
}

/* Картки (флекс винесено в CSS для чистоти HTML) */
.ups-contact-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    text-decoration: none;
    transition: all 0.4s ease;
    border-radius: 0;
}

/* WOW-ефект: виділення блоку при наведенні */
.ups-contact-card:hover {
    border-color: #E6743A;
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(230, 116, 58, 0.15); /* М'яке оранжеве світіння */
}

/* Іконка */
.ups-card-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(230, 116, 58, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    color: #E6743A; /* currentColor для SVG */
}

.ups-card-icon svg {
    width: 28px;
    height: 28px;
    transition: all 0.4s ease;
}

/* Анімація іконки при наведенні */
.ups-contact-card:hover .ups-card-icon {
    background-color: #E6743A;
    transform: scale(1.1);
    color: #FFFFFF; /* SVG автоматично стане білим */
}

/* Лейбл карток */
.ups-card-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999999;
    margin-bottom: 15px;
}

/* Значення (притиснуто до низу) */
.ups-card-value {
    font-size: 22px;
    font-weight: 500;
    color: #222222;
    margin-bottom: 0;
    margin-top: auto; /* Працює замість mt-auto в HTML */
}

/* --- АДАПТИВНІСТЬ ДЕСКТОП --- */
@media (min-width: 992px) {
    .ups-light-contacts {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    .ups-light-info {
        padding-right: 40px;
        margin-bottom: 0;
    }

    .ups-light-title {
        font-size: 64px;
        line-height: 72px;
    }
}

/* --- 2. ТЕМНИЙ БЛОК (ФОРМА ТА 3D КУБ) --- */
.ups-dark-form-section {
    padding-top: 140px;
    padding-bottom: 140px;
    background: #2c2f32;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.ups-dark-info {
    position: relative;
    z-index: 2;
}

.ups-dark-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 56px;
    color: #FFFFFF;
    margin-bottom: 30px;
}

.ups-dark-descr {
    font-size: 18px;
    color: #ffffff;
    line-height: 1.6;
}

/* --- ГЕОМЕТРИЧНИЙ ОРНАМЕНТ (КВАДРАТИ) --- */
.ups-squares-decor {
    position: absolute;
    top: -60px;
    left: -20px;
    width: 240px;
    height: 240px;
    z-index: 1; /* Під текстом */
    pointer-events: none;
}

.ups-decor-square {
    width: 50px;
    height: 50px;
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    animation: stitchIn 0.8s ease-out both;
}

.ups-decor-square.sq-1,
.ups-decor-square.sq-3,
.ups-decor-square.sq-4,
.ups-decor-square.sq-5 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ups-decor-square.sq-2 {
    background: rgba(230, 116, 58, 0.12);
    border: 1px solid rgba(230, 116, 58, 0.3);
}

/* Позиціонування у формі хреста (вишиванка) */
.ups-decor-square.sq-1 { top: 0; left: 50px; animation-delay: 0.2s; }
.ups-decor-square.sq-3 { top: 50px; left: 0; animation-delay: 0.35s; }
.ups-decor-square.sq-2 { top: 50px; left: 50px; animation-delay: 0.5s; }
.ups-decor-square.sq-4 { top: 50px; left: 100px; animation-delay: 0.65s; }
.ups-decor-square.sq-5 { top: 100px; left: 50px; animation-delay: 0.8s; }

/* Почергове обертання при наведенні на секцію */
.ups-dark-form-section:hover .ups-decor-square:nth-child(even) {
    transform: rotate(45deg);
}
.ups-dark-form-section:hover .ups-decor-square:nth-child(odd) {
    transform: rotate(-45deg);
}

/* --- ІНПУТИ --- */
.ups-input-wrap {
    margin-bottom: 40px;
}

.ups-dark-form input,
.ups-dark-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(255, 255, 255);
    padding: 15px 0;
    font-size: 18px;
    color: #FFFFFF; /* Текст, який вводить користувач, буде білим */
    outline: none;
    transition: border-color 0.3s ease;
}

.ups-dark-form textarea {
    height: 60px;
    resize: vertical;
}

.ups-dark-form input:focus,
.ups-dark-form textarea:focus {
    border-bottom-color: #E6743A;
}

/* Плейсхолдери (темно-сірі) */
.ups-dark-form input::placeholder,
.ups-dark-form textarea::placeholder {
    color: #ffffff;
    font-weight: 300;
}

/* Кнопка */
.ups-btn-submit {
    background: transparent;
    border: 1px solid #FFFFFF;
    padding: 20px 50px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ups-btn-submit span {
    color: #FFFFFF;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ups-btn-submit:hover {
    background: #E6743A;
    border-color: #E6743A;
}

.ups-submit-arrow {
    display: inline-block !important;
    width: 25px !important;
    height: 18px !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.ups-btn-submit:hover .ups-submit-arrow {
    transform: translateX(6px) !important;
    filter: brightness(0) invert(1) !important;
}


/* Адаптивність (Десктоп) */
@media (min-width: 992px) {
    .ups-light-title {
        font-size: 64px;
        line-height: 72px;
    }
    .ups-dark-title {
        font-size: 64px;
        line-height: 72px;
    }
    .ups-squares-decor {
        top: -100px;
        left: -50px;
        width: 300px;
        height: 300px;
    }
    .ups-decor-square {
        width: 60px;
        height: 60px;
    }
    .ups-decor-square.sq-1 { top: 0; left: 60px; }
    .ups-decor-square.sq-3 { top: 60px; left: 0; }
    .ups-decor-square.sq-2 { top: 60px; left: 60px; }
    .ups-decor-square.sq-4 { top: 60px; left: 120px; }
    .ups-decor-square.sq-5 { top: 120px; left: 60px; }
}

/* --- --- */
.ups-text-accent {
    color: #E6743A;
}

/* --- About page --- */
/* --- 1. ГОЛОВНИЙ БАНЕР «ПРО НАС» (СВІТЛИЙ) --- */
.ups-about-banner {
    background: #FAFAFA;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border-bottom: 1px solid #E5E5E5;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: auto;
}

.ups-about-banner .banner {
    min-height: auto !important; /* Overrides global .banner min-height (650px) to prevent vertical stretch */
}

/* Адаптивність банера */
@media (min-width: 992px) {
    .ups-about-banner {
        padding-top: 130px;
        padding-bottom: 130px;
    }
}

/* Ховер ефект зустрічного обертання фігур на банері */
.ups-about-banner:hover .up-square-1,
.ups-about-banner:hover .up-square-3,
.ups-about-banner:hover .up-square-5 {
    transform: rotate(45deg);
}

.ups-about-banner:hover .up-square-2,
.ups-about-banner:hover .up-square-4,
.ups-about-banner:hover .up-square-6 {
    transform: rotate(-45deg);
}

/* --- 2. СЕКЦІЯ «ХТО МИ» (ТЕМНА) --- */
.ups-about-hero {
    background: #2c2f32;
    padding-top: 100px;
    padding-bottom: 100px;
    color: #FFFFFF;
}

.ups-about-decor-square {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.4s ease;
    animation: stitchIn 0.8s ease-out both;
    animation-delay: 0.3s;
}

.ups-about-hero:hover .ups-about-decor-square {
    transform: rotate(45deg);
}

.ups-about-label {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E6743A;
    margin-bottom: 30px;
    border-bottom: 1px solid #E6743A;
    padding-bottom: 8px;
}

.ups-about-title {
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    margin: 0;
    max-width: 800px; /* Limits paragraph width to prevent extreme line stretch */
}

/* --- 2. БЛОК СТАТИСТИКИ (СВІТЛИЙ) --- */
.ups-about-stats {
    background-color: #FAFAFA;
    padding-top: 80px;
    padding-bottom: 80px;
}

.ups-stat-card {
    position: relative;
    padding-top: 30px;
}

/* WOW-ефект: Анімована лінія над статистикою */
.ups-stat-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
}

.ups-stat-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #E6743A;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-stat-card:hover .ups-stat-line::before {
    width: 100%;
}

.ups-stat-num {
    font-size: 54px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #272727;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    display: block;
    line-height: 100%;
}

.ups-stat-card:hover .ups-stat-num {
    color: #E6743A;
}

.ups-stat-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999999;
}

/* --- 3. БЛОК ПРИНЦИПІВ (СВІТЛИЙ) --- */
.ups-about-values {
    background-color: #FFFFFF;
    padding-top: 100px;
    padding-bottom: 100px;
}

.ups-values-main-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 40px;
    color: #222222;
    margin-bottom: 40px;
    position: sticky;
    top: 40px;
}

.ups-values-list {
    border-top: 1px solid #E5E5E5;
}

.ups-value-row {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    border-bottom: 1px solid #E5E5E5;
    cursor: default;
}

.ups-value-num {
    font-size: 16px;
    font-weight: 500;
    color: #E6743A;
    width: 100%;
    margin-bottom: 15px;
}

.ups-value-content {
    flex-grow: 1;
    width: 100%;
}

.ups-value-content h3 {
    font-size: 24px;
    font-weight: 400;
    color: #222222;
    margin-bottom: 15px;
}

.ups-value-content p {
    font-size: 16px;
    color: #777777;
    line-height: 1.6;
    margin: 0;
}

/* Контейнер для "липкої" колонки */
.ups-sticky-side {
    position: relative;
    padding-bottom: 40px;
}

/* Декоративний текст на фоні */
.ups-side-watermark {
    position: absolute;
    top: -40px;
    left: -30px;
    font-size: 140px;
    font-weight: 900;
    color: #222222;
    opacity: 0.03; /* Ледь помітний ефект */
    z-index: -1;
    pointer-events: none;
    letter-spacing: -5px;
}

/* Мітка зверху */
.ups-side-tag {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999999;
    margin-bottom: 25px;
}

/* Короткий опис */
.ups-side-descr {
    font-size: 18px;
    color: #777777;
    line-height: 1.6;
    margin-top: 30px;
    margin-bottom: 40px;
}

/* Стек технологій */
.ups-side-stack {

}

.ups-side-stack span {
    font-size: 16px;
    font-weight: 600;
    color: #E6743A;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline-block;

}

.ups-sticky-side::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 0;
    width: 2px;
    height: 80px;
    background-color: #E6743A;
}


@media (min-width: 992px) {
    .ups-about-hero {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    .ups-about-title {
        font-size: 64px;
        line-height: 80px;
    }

    .ups-about-stats {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .ups-stat-num {
        font-size: 64px;
    }

    .ups-about-values {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    .ups-values-main-title {
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 0;
    }

    .ups-value-row {
        flex-wrap: nowrap;
        padding: 50px 30px;
    }

    .ups-value-num {
        width: 80px;
        margin-bottom: 0;
    }

    .ups-value-content {
        width: auto;
        padding-right: 40px;
    }

    .ups-value-content h3 {
        font-size: 32px;
    }

    .ups-value-content p {
        font-size: 18px;
    }

    .ups-sticky-side {
        position: sticky;
        top: 100px;
    }
}


/*Catalog*/
/* =========================================
   СЕКЦІЯ КАТАЛОГУ (СІТКА ТА АБСТРАКЦІЇ)
========================================= */

/* --- БАЗОВІ НАЛАШТУВАННЯ СЕКЦІЇ --- */
.ups-grid-catalog-section {
    padding-top: 80px;
    padding-bottom: 100px;
    background-color: #FAFAFA;
}

/* Відступи між елементами сітки (замінює класи mb- у HTML) */
.ups-grid-item {
    margin-bottom: 40px;
}

/* --- БЛОК 1: ВСТУПНИЙ ТЕКСТ --- */
.ups-catalog-intro-block {
    padding-right: 0;
}

/* Хлібні крихти */
.ups-breadcrumb-nav {
    margin-bottom: 40px;
}

.ups-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ups-breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ups-breadcrumb-item a {
    color: #999999;
    text-decoration: none;
    transition: color 0.4s ease;
}

.ups-breadcrumb-item a:hover {
    color: #E6743A;
}

.ups-breadcrumb-item + .ups-breadcrumb-item::before {
    content: '/';
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    color: #505050;
}

.ups-breadcrumb-item.ups-active {
    color: #222222;
    font-weight: 600;
}

/* Декоративна мітка та заголовок */
.ups-intro-tag {
    display: flex;
    align-items: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E6743A;
    margin-bottom: 25px;
}

.ups-decor-line {
    width: 40px;
    height: 2px;
    background-color: #E6743A;
    margin-right: 15px;
}

.ups-intro-title {
    font-size: 42px;
    line-height: 52px;
    font-weight: 900;
    color: #222222;
    margin-top: 0;
    margin-bottom: 30px;
}

.ups-intro-descr {
    font-size: 20px;
    color: #2a2a2a;
    line-height: 1.6;
    margin: 0;
    border-left: 4px solid #E6743A;
    padding-left: 20px;
}

/* --- ВЕЛИКІ КАРТКИ З CSS-ФОНАМИ --- */
.ups-product-card-vibrant {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #c6c8cc;
    text-decoration: none;
    position: relative;

    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Візуальна частина (замість фото) */
.ups-card-visual {
    height: 420px;
    position: relative;
    overflow: hidden;
    background-color: #3f4953;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Технологічна сітка на фоні */
.ups-visual-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
}

/* --- АНІМОВАНИЙ SVG-ТЕКСТ НА ФОНІ --- */
.ups-visual-huge-text-wrap {
    position: absolute;
    top: -13%;
    right: -7%;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.ups-animated-text-path {
    font-size: 150px;
    font-family: "Irpn", serif;
    font-weight: 900;
    fill: rgb(75 84 92);
    stroke: rgba(112, 122, 128, 0.47);
    stroke-width: 1px;
    letter-spacing: 7px;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: upsDrawTextAnim 20s linear infinite;
    line-height: 90%;

}

/* Самі ключові кадри залишаються без змін */
@keyframes upsDrawTextAnim {
    0% {
        stroke-dashoffset: 800;
    }
    40%, 60% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -800;
    }
}

/* Ключові кадри: лінія малюється і плавно стирається */
@keyframes upsDrawTextAnim {
    0% {
        stroke-dashoffset: 800; /* Цифра повністю схована */
    }
    40%, 60% {
        stroke-dashoffset: 0; /* Цифра повністю намальована (затримується на мить) */
    }
    100% {
        stroke-dashoffset: -800; /* Цифра плавно стирається в інший бік */
    }
}

.ups-visual-core-svg {
    width: 90px;
    height: 90px;
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-visual-core-svg svg {
    width: 100%;
    height: 100%;
}

.ups-badge-vibrant {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    background-color: #E6743A;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
}

.ups-card-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ups-card-title {
    font-size: 24px;
    font-weight: 900;
    color: #222222;
    margin-top: 0;
    margin-bottom: 15px;
    transition: color 0.4s ease;
    font-family: "Irpn", serif;
}

.ups-card-text {
    font-size: 20px;
    color: #1e2021;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 40px;
}

.ups-card-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    color: #222222;
    transition: color 0.4s ease;
}

.ups-btn-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ups-btn-arrow {
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #FAFAFA;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.ups-btn-arrow svg {
    width: 18px;
    height: 18px;
}

/* --- WOW-ЕФЕКТ ПРИ НАВЕДЕННІ (HOVER) --- */
.ups-product-card-vibrant:hover {
    transform: translate(-6px, -6px);
    border-color: #222222;
    box-shadow: 10px 10px 0px #E6743A;
}

/* Анімація SVG (масштаб та легкий поворот) */
.ups-product-card-vibrant:hover .ups-visual-core-svg {
    transform: scale(1.15) rotate(15deg);
}

.ups-product-card-vibrant:hover .ups-card-title {
    color: #E6743A;
}

.ups-product-card-vibrant:hover .ups-card-btn {
    color: #E6743A;
}

.ups-product-card-vibrant:hover .ups-btn-arrow {
    background-color: #E6743A;
    color: #FFFFFF;
    transform: translateX(10px);
}

.ups-draw-path {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-product-card-vibrant:hover .ups-draw-path {
    stroke-dashoffset: 0;
}

/* --- ДЕКОРАТИВНИЙ КУБ --- */
.ups-intro-decor-cube {
    width: 48px;
    height: 48px;
    margin-bottom: 30px;
    /* Анімація левітації (6 секунд на повний цикл) */
    animation: upsFloatCube 6s ease-in-out infinite;
}

.ups-intro-decor-cube svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- БЛОК 1: ВСТУПНИЙ ТЕКСТ --- */
.ups-catalog-intro-block {
    position: relative; /* Необхідно для абсолютного позиціонування фонового куба */
    padding-right: 0;

    /* Робимо вирівнювання по вертикалі посередині */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    z-index: 1; /* Щоб текст був над фоновим кубом */
}

/* --- ВЕЛИКИЙ СІРИЙ КУБ НА ФОНІ --- */
.ups-bg-cube-gray {
    position: absolute;
    /* Центруємо куб відносно текстового блоку */
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    z-index: -1; /* Ховаємо під текст */
    pointer-events: none; /* Щоб він не перекривав кліки по хлібних крихтах */
    /* Дуже повільна анімація плавання для ефекту глибини */
    animation: upsFloatBgCube 12s ease-in-out infinite;
}

.ups-bg-cube-gray svg {
    width: 100%;
    height: 100%;
}

@keyframes upsFloatBgCube {
    0%, 100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -53%); /* Ледь помітно піднімається */
    }
}
/* --- ПЛОСКА ГЕОМЕТРІЯ НА ФОНІ --- */
.ups-bg-geometric-decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;

}

/* Світло-сірий квадрат (основа) */
.ups-square-light {
    position: absolute;

    top: 103px;
    left: 10px;
    width: 120px;
    height: 120px;
    background-color: #e7e3e3;

}

/* Синьо-сірий квадрат (верхній правий) */
.ups-square-blue {
    position: absolute;
    top: -10px;
    right: 44px;
    width: 90px;
    height: 90px;
    background-color: #92A6B0;
}

/* Бежевий квадрат (нижній лівий) */
.ups-square-beige {
    position: absolute;
    top: -42px;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: #D8CABF;
}


@media (min-width: 768px) {
    .ups-square-light {
        position: absolute;
        top: 47px;
        left: 380px;
        width: 140px;
        height: 140px;
        background-color: #e7e3e3;
    }
}

@media (min-width: 992px) {
    .ups-catalog-intro-block {
        padding-right: 40px;
    }

    .ups-square-light {
        width: 160px;
        height: 160px;
        top: 32px;
        left: 110px;
    }

    .ups-square-blue {
        width: 130px;
        height: 130px;
        top: 106px;
        right: 71px;
    }

    .ups-square-beige {
        width: 110px;
        height: 110px;
        top: -25px;
        left: 2px;
    }
}
/* Адаптивність: Збільшуємо розміри на десктопі */
@media (min-width: 992px) {
    .ups-catalog-intro-block {
        padding-right: 40px;
    }

    .ups-bg-cube-gray {
        width: 450px;
        height: 450px;
        left: 50%;
    }
}

/* Ключові кадри для левітації */
@keyframes upsFloatCube {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Легке підняття вгору */
    }
}

/* Збільшуємо відступ на десктопі для кращого дихання дизайну */
@media (min-width: 992px) {
    .ups-intro-decor-cube {
        width: 96px;
        height: 96px;
        margin-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .ups-grid-catalog-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .ups-grid-item {
        margin-bottom: 30px;
    }

    .ups-catalog-intro-block {
        padding-right: 40px;
    }

    .ups-intro-title {
        font-size: 64px;
        line-height: 72px;
    }

    .ups-intro-descr {
        font-size: 20px;
    }

    .ups-card-body {
        padding: 40px;
    }

    .ups-card-title {
        font-size: 28px;
    }

    .ups-card-text {
        font-size: 22px;
    }

    .ups-btn-text {
        font-size: 14px;
    }
}

/* --- ФІКСОВАНИЙ ХЕДЕР --- */
.ups-header {
    background-color: #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

/* --- СТАН СПОКОЮ (На самому верху) --- */
.ups-header {
    background-color: transparent;
    padding-top: 25px;
    padding-bottom: 25px;
    transition: all 0.4s ease; /* Плавна зміна всього: фону, відступів, кольору */
}

/* --- СТАН СКРОЛУ (Коли прокрутили вниз) --- */
.ups-header.is-scrolled {
    background-color: #FFFFFF; /* Білий фон */
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Легка тінь для відриву від контенту */
}

/* Перефарбовуємо посилання в темний колір на білому фоні */
.ups-header.is-scrolled .nav-link {
    color: #222222 !important;
}

.ups-header.is-scrolled .nav-link:hover {
    color: #E6743A !important; /* Ваш фірмовий оранжевий при наведенні */
}

/* Перефарбовуємо іконку мобільного меню (бургера) в темний */
.ups-header.is-scrolled .navbar-toggler-icon {
    filter: invert(1); /* CSS-трюк, який робить білу іконку чорною */
}

.ups-header.is-scrolled .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

.inner-page-banner {
    padding-top: 100px; /* Приблизна висота вашого хедера */
}

/* Колір кнопки тоглера (якщо фон прозорий, щоб її було видно) */
.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- КОМПЕНСАЦІЯ ВИСОТИ ФІКСОВАНОГО ХЕДЕРА --- */

/* Для мобільної версії (відступ дорівнює приблизній висоті мобільного хедера) */
.wrap-banner-main .banner {
    padding-top: 100px;
}

/* Для десктопної версії (якщо хедер стає вищим) */
@media (min-width: 992px) {
    .wrap-banner-main .banner {
        padding-top: 130px;
    }
}

/* =========================================
   СХЕМОТЕХНІКА: СТОРІНКА 404
========================================= */
/* --- СТОРІНКА 404: ІДЕАЛЬНЕ ЦЕНТРУВАННЯ --- */

.page-404 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрує контент рівно по вертикалі */
    align-items: center;     /* Центрує контент по горизонталі */

    /* Розраховуємо висоту: 100% екрана мінус приблизна висота футера (200px) */
    min-height: calc(100vh - 200px);

    /* Жорсткий відступ зверху, щоб текст НІКОЛИ не ховався під хедер */
    padding-top: 120px !important;
    padding-bottom: 60px;

    position: relative;
    overflow: hidden;
}

/* Гарантуємо, що сітка Bootstrap всередині flex-контейнера працює правильно */
.page-404 .row {
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1; /* Текст завжди над фоновою цифрою */
}

.ups-404-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (min-width: 992px) {
    .page-404 {
        min-height: calc(100vh - 250px);
        padding-top: 160px !important;
    }
}

/* --- ВЕЛИЧЕЗНА АНІМОВАНА ФОНОВА ЦИФРА --- */
.ups-404-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.ups-404-animated-path {
    font-size: 160px; /* Розмір для мобільних */
    font-weight: 900;
    font-family: inherit;
    fill: rgba(230, 116, 58, 0.03); /* Ледь помітна оранжева заливка */
    stroke: rgba(230, 116, 58, 0.2); /* Більш чіткий оранжевий контур */
    stroke-width: 1px;
    letter-spacing: -5px;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: upsDraw404 8s linear infinite;
}

@keyframes upsDraw404 {
    0% { stroke-dashoffset: 1200; }
    40%, 60% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1200; }
}

.ups-404-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ups-404-title {
    font-size: 38px;
    line-height: 48px;
    font-weight: 900;
    color: #222222;

    margin-top: 0;
    margin-bottom: 20px;
}

.ups-404-descr {
    font-size: 20px;
    color: #111111;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 40px auto;
}


@media (min-width: 992px) {
    .page-404 {
        min-height: 60vh;
        padding-top: 100px;
        padding-bottom: 120px;
    }

    .ups-404-title {
        font-size: 56px;
        line-height: 64px;
        margin-bottom: 24px;
    }

    .ups-404-descr {
        font-size: 18px;
        max-width: 540px;
    }

    .ups-404-animated-path {
        font-size: 260px;
        letter-spacing: -15px;
    }
}


/* =========================================
   АРХІТЕКТУРА МОДАЛЬНОЇ ФОРМИ
========================================= */

.ups-modal-content {
    background-color: #FFFFFF;
    border: 1px solid #222222; /* Контрастна строга рамка */
    border-radius: 0; /* Жорстка геометрія, ніяких закруглень */
    padding: 30px;
    box-shadow: 15px 15px 0px rgba(236, 116, 58, 0.1); /* Легка фірмова тінь */
}

.ups-modal-header {
    border-bottom: none;
    padding: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ups-modal-title {
    font-size: 28px;
    font-weight: 500;
    color: #222222;
    margin: 0;
}

/* Кнопка закриття хрестика */
.ups-modal-close {
    background-size: 14px;
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ups-modal-close:hover {
    transform: rotate(90deg);
    opacity: 1;
}

.ups-modal-body {
    padding: 0;
}

.ups-modal-subtitle {
    font-size: 14px;
    color: #777777;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 35px;
    border-left: 2px solid #E6743A;
    padding-left: 15px;
}

/* --- СТИЛІЗАЦІЯ ІНПУТІВ (FLOATING LABELS) --- */
.ups-form-group {
    position: relative;
    margin-bottom: 30px;
}

.ups-form-input {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #222222;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #E5E5E5; /* Лінія в стані спокою */
    border-radius: 0;
    outline: none;
    transition: border-color 0.4s ease;
}

/* Підсвітка лінії при фокусі */
.ups-form-input:focus {
    border-bottom-color: #E6743A;
}

/* Лейбл, який буде рухатися */
.ups-form-label {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    color: #999999;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Магія переміщення лейбла вгору при фокусі або коли інпут заповнений */
.ups-form-input:focus ~ .ups-form-label,
.ups-form-input:not(:placeholder-shown) ~ .ups-form-label {
    top: -12px;
    font-size: 12px;
    color: #E6743A;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- КНОПКА ВІДПРАВКИ --- */
.ups-form-submit-wrap {
    margin-top: 40px;
}

.ups-submit-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #222222;
    background-color: #222222;
    color: #FFFFFF;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.ups-submit-arrow {
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    position: relative;
    top: -1px;
}

.ups-submit-arrow svg {
    width: 18px;
    height: 20px;
    display: block;
}

/* Ефекти ховера для кнопки */
.ups-submit-btn:hover {
    background-color: #E6743A;
    border-color: #E6743A;
}

.ups-submit-btn:hover .ups-submit-arrow {
    transform: translateX(6px);
}

/* --- АДАПТИВНІСТЬ (MOBILE FIRST) --- */
@media (min-width: 768px) {
    .ups-modal-content {
        padding: 45px;
    }

    .ups-modal-title {
        font-size: 32px;
    }

    .ups-modal-subtitle {
        font-size: 15px;
        margin-bottom: 45px;
    }
}

/*Animation */
.ups-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Загальні стилі для кожної точки */
.ups-particles .dot {
    position: absolute;

}

/* --- Ключові кадри анімації (створює відчуття хвиль) --- */
@keyframes upsFloatingDots {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(24px, -20px); /* Невелике зсув праворуч-вгору */
    }
    66% {
        transform: translate(-20px, 24px); /* Зсув ліворуч-вниз */
    }
}

.dot-1  { animation: upsFloatingDots infinite ease-in-out; width: 50px; height: 50px; top: 20%; left: 10%; animation-duration: 15s; background: #d1d1d1;}
.dot-2  { animation: upsFloatingDots infinite ease-in-out; width: 50px; height: 50px; top: 11%; left: -5%; animation-duration: 18s; animation-delay: .1s; background: #9f8d76; opacity: 0.2; }
.dot-3  { animation: upsFloatingDots infinite ease-in-out; width: 70px; height: 70px; top: 77%; left: 63%; animation-duration: 20s; animation-delay: .2s; background: #cacfd2; }
.dot-4  { animation: upsFloatingDots infinite ease-in-out; width: 90px; height: 90px; top: 6%;  left: 29%; animation-duration: 21s; animation-delay: 1s; background: #ffffff; opacity: 1; }
.dot-5  { animation: upsFloatingDots infinite ease-in-out; width: 30px; height: 30px; top: 62%; left: 3%;  animation-duration: 17s; animation-delay: 0.5s; background: #e6743a;}
.dot-6  { animation: upsFloatingDots infinite ease-in-out; width: 100px; height: 100px; top: 86%; left: 26%; animation-duration: 20s; animation-delay: 2s; background: rgb(107 73 49 / 28%); }
.dot-7  { animation: upsFloatingDots infinite ease-in-out; width: 44px; height: 44px; top: 78%; left: 88%; animation-duration: 22s; animation-delay: .4s; background: #4d5154; opacity: 0.1; }
.dot-8  { animation: upsFloatingDots infinite ease-in-out; width: 70px; height: 70px; top: 30%; left: -9%; animation-duration: 19s; animation-delay: .6s; background: rgba(54, 96, 121, 0.34); }
.dot-9  { animation: upsFloatingDots infinite ease-in-out; width: 60px; height: 60px; top: 65%; left: 90%; animation-duration: 22s; animation-delay: .8s; background: #4d5154; opacity: 0.15; }
.dot-10 { animation: upsFloatingDots infinite ease-in-out; width: 90px; height: 90px; top: 15%; left: 85%; animation-duration: 14s; animation-delay: 3s;background: rgba(77, 81, 84, 0.44); }

/* Адаптивність: на десктопі можемо трохи збільшити точки */
@media (min-width: 992px) {

    .dot-4 {
        top: 31%;
        left: 0;
    }
    .dot-2 {
        width: 105px;
        height: 105px;
    }

    .dot-3 {
        width: 120px;
        height: 120px;
        top: 84%;
        left: 57%;
        background: rgba(202, 207, 210, 0.5);
    }

    .dot-5 {
        width: 50px;
        height: 50px;
        top: 69%;
        left: 16%;
    }

    .dot-7 {
        top: 60%;
        left: 81%;
    }

    .dot-9 {
        width: 100px;
        height: 100px;
        top: 53%;
        left: 93%;
        background: rgba(117, 60, 39, 0.55);
    }
}

@media (min-width: 1200px) {

    .dot-9 {

        top: 42%;
        left: 93%;

    }
}

@media (min-width: 1400px) {

    .dot-1 {
        width: 80px;
        height: 80px;
        top: 11%;
        left: 21%;
        animation-duration: 15s;
        background: #ffffff;
    }

    .dot-9 {
        top: 42%;
        left: 93%;

    }

    .dot-2 {
        width: 220px;
        height: 220px;
        top: 10%;
        left: -4%;
    }

    .dot-4 {
        top: 42%;
        left: 6%;
    }

    .dot-4 {
        top: 47%;
        left: 9%;
        background: #8b8b8b;
    }
}


@media (min-width: 1900px) {

    .dot-9 {
        width: 150px;
        height: 150px;
        top: 35%;
        left: 93%;
        background: rgba(117, 60, 39, 0.55);
    }


    .dot-6 {
        width: 150px;
        height: 150px;
        top: 74%;
        left: 26%;
        background: rgb(107 73 49 / 28%);
    }

    .dot-7 {
        top: 46%;
        left: 80%;
        width: 70px;
        height: 70px;
    }

    .dot-5 {
        top: 64%;

    }

}

/* --- УНІФІКОВАНІ СТИЛІ ДИЗАЙН-СИСТЕМИ --- */
.ups-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E6743A;
    font-weight: 700;
    margin-bottom: 25px;
}

.up-square-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #E6743A;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.usrv-values-sec .ups-mission-descr {
    color: rgba(255, 255, 255, 0.6);
}

/* --- СЕКЦІЯ БАНЕРА ПОСЛУГ ТА РОБІТ (СВІТЛИЙ) --- */
.ups-services-banner,
.ups-works-banner {
    background: #FAFAFA;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border-bottom: 1px solid #E5E5E5;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: auto;
}

.ups-services-banner .banner,
.ups-works-banner .banner {
    min-height: auto !important;
}

@media (min-width: 992px) {
    .ups-services-banner,
    .ups-works-banner {
        padding-top: 130px;
        padding-bottom: 130px;
    }
}

.ups-services-banner:hover .up-square-1,
.ups-services-banner:hover .up-square-3,
.ups-services-banner:hover .up-square-5,
.ups-works-banner:hover .up-square-1,
.ups-works-banner:hover .up-square-3,
.ups-works-banner:hover .up-square-5 {
    transform: rotate(45deg);
}

.ups-services-banner:hover .up-square-2,
.ups-services-banner:hover .up-square-4,
.ups-services-banner:hover .up-square-6,
.ups-works-banner:hover .up-square-2,
.ups-works-banner:hover .up-square-4,
.ups-works-banner:hover .up-square-6 {
    transform: rotate(-45deg);
}

/* --- СЕКЦІЯ ПОРІВНЯННЯ ДО / ПІСЛЯ --- */
.ups-comparison-sec {
    padding: 60px 0;
    background-color: #FAFAFA;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

.ups-compare-card {
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-compare-card:hover {
    transform: translateY(-5px);
}

.card-before {
    border-top: 4px solid #cc4b37;
}

.card-after {
    border-top: 4px solid #E6743A;
}

.card-after:hover {
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.1);
    border-color: #E6743A;
}

.ups-compare-header {
    margin-bottom: 30px;
}

.ups-compare-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.badge-before {
    background-color: rgba(204, 75, 55, 0.1);
    color: #cc4b37;
}

.badge-after {
    background-color: rgba(230, 116, 58, 0.1);
    color: #E6743A;
}

.ups-compare-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    margin: 0;
}

.ups-compare-list {
    padding-left: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ups-compare-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.ups-list-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.icon-cross {
    background-color: rgba(204, 75, 55, 0.08);
    color: #cc4b37;
}

.icon-check {
    background-color: rgba(39, 201, 63, 0.08);
    color: #27c93f;
}

.ups-compare-list strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 5px;
}

.ups-compare-list p {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* --- СЕКЦІЯ FAQ --- */
.ups-faq-sec {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.ups-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ups-faq-item {
    background-color: #FAFAFA !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 0 !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ups-faq-item:hover {
    border-color: #222222 !important;
}

.ups-faq-btn {
    background-color: transparent !important;
    color: #222222 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 24px 30px !important;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 100%;
}

.ups-faq-btn::after {
    display: none !important;
}

.ups-faq-icon {
    flex-shrink: 0;
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 20px;
    transition: transform 0.4s ease;
}

.ups-faq-icon::before,
.ups-faq-icon::after {
    content: '';
    position: absolute;
    background-color: #E6743A;
    transition: transform 0.4s ease;
}

.ups-faq-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

.ups-faq-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}

.ups-faq-btn:not(.collapsed) .ups-faq-icon {
    transform: rotate(45deg);
}

.ups-faq-body {
    padding: 0 30px 24px 30px !important;
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
}

.ups-faq-body p {
    margin: 0;
}

@media (min-width: 992px) {
    .ups-comparison-sec, .ups-faq-sec {
        padding: 100px 0;
    }
    .ups-compare-card {
        padding: 45px;
    }
    .ups-faq-btn {
        font-size: 20px !important;
        padding: 30px 40px !important;
    }
    .ups-faq-body {
        padding: 0 40px 30px 40px !important;
        font-size: 16px;
    }
}

/* --- СЕКЦІЯ СЕРВІС-МАТЧЕРА (КВІЗ) --- */
.ups-matcher-sec {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.ups-matcher-box {
    background-color: #FAFAFA;
    border: 1px solid #E5E5E5;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
}

.ups-matcher-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.ups-matcher-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
    z-index: 1;
}

.ups-step-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FAFAFA;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #999999;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.ups-step-indicator.active {
    background-color: #E6743A;
    border-color: #E6743A;
    color: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(230, 116, 58, 0.15);
}

.ups-step-indicator.completed {
    background-color: #222222;
    border-color: #222222;
    color: #FFFFFF;
}

.ups-matcher-question-wrapper {
    min-height: 250px;
}

.ups-matcher-question {
    display: none;
}

.ups-matcher-question.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

.ups-matcher-question h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 25px;
}

.ups-matcher-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.ups-matcher-option {
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #2D363D;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ups-matcher-option::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #999999;
    background-color: transparent;
    transform: rotate(45deg);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.ups-matcher-option:hover {
    border-color: #222222;
    background-color: rgba(0, 0, 0, 0.01);
}

.ups-matcher-option.selected {
    border-color: #E6743A;
    background-color: rgba(230, 116, 58, 0.02);
}

.ups-matcher-option.selected::before {
    border-color: #E6743A;
    background-color: #E6743A;
}

.ups-matcher-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-top: 1px solid #E5E5E5;
    padding-top: 30px;
}

.btn-matcher {
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #222222;
    border-radius: 50px;
    background: transparent;
    color: #222222;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-matcher:hover {
    background-color: #222222;
    color: #FFFFFF;
}

.btn-matcher.btn-next {
    background-color: #E6743A;
    border-color: #E6743A;
    color: #FFFFFF;
}

.btn-matcher.btn-next:hover {
    background-color: #d1622c;
    border-color: #d1622c;
}

.btn-matcher:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
    color: #999999;
    border-color: #E5E5E5;
}

.ups-matcher-result {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.ups-matcher-result.active {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

.ups-result-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E6743A;
    font-weight: 800;
    margin-bottom: 15px;
    display: block;
}

.ups-matcher-result h3 {
    font-size: 32px;
    font-weight: 900;
    color: #222222;
    margin-bottom: 20px;
    font-family: "Irpn", serif;
}

.ups-result-desc {
    font-size: 18px;
    line-height: 1.7;
    color: #555555;
    max-width: 650px;
    margin: 0 auto 35px auto;
}

@media (min-width: 768px) {
    .ups-matcher-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ups-matcher-sec {
        padding: 100px 0;
    }
    .ups-matcher-box {
        padding: 60px;
    }
}

/* --- СЕКЦІЇ СТАТЕЙ ТА КОНТЕНТУ СТОРІНКИ «ПРО НАС» --- */

/* 1. Секція «Наша філософія» */
.ups-about-mission {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.ups-mission-title {
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #222222;
    margin-top: 10px;
    margin-bottom: 20px;
}

.ups-mission-descr {
    font-size: 16px;
    line-height: 1.8;
    color: #777777;
}

.ups-philosophy-card {
    padding: 30px;
    background: #FAFAFA;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-philosophy-card:hover {
    transform: translateY(-5px);
    border-color: #222222;
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.1);
}

.ups-ph-num {
    display: block;
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #E6743A;
    margin-bottom: 20px;
    line-height: 100%;
}

.ups-philosophy-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 15px;
}

.ups-philosophy-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #777777;
    margin: 0;
}

@media (min-width: 992px) {
    .ups-about-mission {
        padding: 100px 0;
    }
    .ups-mission-title {
        font-size: 42px;
        line-height: 52px;
    }
    .ups-mission-descr {
        font-size: 18px;
    }
    .ups-philosophy-card {
        padding: 40px;
    }
}

/* 2. Секція «Чого ми НЕ робимо» */
.ups-about-anti {
    padding: 60px 0;
    background-color: #FAFAFA;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

.ups-anti-title {
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #222222;
    margin-top: 10px;
    margin-bottom: 20px;
}

.ups-anti-descr {
    font-size: 16px;
    line-height: 1.8;
    color: #777777;
    margin-bottom: 30px;
}

.ups-anti-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ups-anti-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-anti-item:hover {
    transform: translateX(5px);
    border-color: #222222;
    box-shadow: 5px 5px 0px rgba(230, 116, 58, 0.08);
}

.ups-anti-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(230, 116, 58, 0.08);
    color: #E6743A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.ups-anti-item:hover .ups-anti-icon {
    background: #E6743A;
    color: #FFFFFF;
    transform: rotate(90deg);
}

.ups-anti-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 10px;
}

.ups-anti-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #777777;
    margin: 0;
}

@media (min-width: 992px) {
    .ups-about-anti {
        padding: 100px 0;
    }
    .ups-anti-title {
        font-size: 42px;
        line-height: 52px;
    }
    .ups-anti-descr {
        font-size: 18px;
        margin-bottom: 0;
    }
    .ups-anti-item {
        padding: 30px;
    }
}

/* 3. Секція «Наша історія» (Timeline) */
.ups-about-history {
    padding: 60px 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.ups-history-main-title {
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #222222;
    margin-top: 10px;
}

.ups-timeline-wrap {
    position: relative;
    margin-top: 40px;
}

.ups-timeline-line {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 15px;
    width: 2px;
    background: #E5E5E5;
    z-index: 1;
}

.ups-timeline-card {
    position: relative;
    padding: 30px;
    background: #FAFAFA;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    margin-left: 30px;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.ups-timeline-card:hover {
    border-color: #222222;
    background: #FFFFFF;
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.08);
}

.ups-timeline-dot {
    position: absolute;
    top: 38px;
    left: -36px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border: 2px solid #E6743A;
    z-index: 3;
    transition: all 0.3s ease;
}

.ups-timeline-card:hover .ups-timeline-dot {
    background: #E6743A;
    transform: scale(1.3);
}

.ups-timeline-year {
    display: block;
    font-size: 24px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #E6743A;
    margin-bottom: 10px;
    line-height: 100%;
}

.ups-timeline-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 10px;
}

.ups-timeline-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #777777;
    margin: 0;
}

@media (min-width: 992px) {
    .ups-about-history {
        padding: 100px 0;
    }
    .ups-history-main-title {
        font-size: 42px;
    }
    .ups-timeline-line {
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        bottom: auto;
    }
    .ups-timeline-card {
        margin-left: 0;
        margin-top: 30px;
    }
    .ups-timeline-dot {
        top: -36px;
        left: 30px;
    }
}

/* 4. Секція «Як ми працюємо» */
.ups-about-process {
    padding: 60px 0;
    background-color: #FAFAFA;
}

.ups-process-main-title {
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #222222;
    margin-top: 10px;
}

.ups-process-card {
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-process-card:hover {
    transform: translateY(-5px);
    border-color: #222222;
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.08);
}

.ups-process-num {
    display: block;
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #E6743A;
    margin-bottom: 20px;
    line-height: 100%;
}

.ups-process-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 15px;
}

.ups-process-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #777777;
    margin: 0;
}

@media (min-width: 992px) {
    .ups-about-process {
        padding: 100px 0;
    }
    .ups-process-main-title {
        font-size: 42px;
    }
    .ups-process-card {
        padding: 40px 30px;
    }
}

/* 5. Секція «CTA» */
.ups-about-cta {
    padding: 80px 0;
    background-color: #2c2f32;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.ups-cta-title {
    font-size: 32px;
    font-weight: 900;
    font-family: "Irpn", serif;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.ups-cta-descr {
    font-size: 16px;
    color: #CCCCCC;
    max-width: 600px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

.ups-btn-light {
    display: inline-flex;
    align-items: center;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    padding: 21px 35px 20px 35px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    border-radius: 50px;
    cursor: pointer;
    line-height: 100%;
}

.ups-btn-light img {
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.ups-btn-light:hover {
    background: #E6743A;
    border-color: #E6743A;
    color: #FFFFFF;
}

.ups-btn-light:hover img {
    transform: translateX(6px);
}

@media (min-width: 992px) {
    .ups-about-cta {
        padding: 100px 0;
    }
    .ups-cta-title {
        font-size: 48px;
    }
    .ups-cta-descr {
        font-size: 18px;
        margin-bottom: 45px;
    }
}

/* =========================================
   ДОДАТКОВІ СТИЛІ ДЛЯ СТОРІНКИ РОБІТ (WORKS)
   ========================================= */

/* --- 1. Градієнти для візуальних блоків карток --- */
.ups-card-grad-logistic {
    background: linear-gradient(135deg, #150f24 0%, #463b6b 100%) !important;
}
.ups-card-grad-realestate {
    background: linear-gradient(135deg, #2b110c 0%, #b23b00 100%) !important;
}
.ups-card-grad-agriculture {
    background: linear-gradient(135deg, #2b1c10 0%, #a36822 100%) !important;
}
.ups-card-grad-vetcare {
    background: linear-gradient(135deg, #092e40 0%, #206d96 100%) !important;
}
.ups-card-grad-finflow {
    background: linear-gradient(135deg, #101010 0%, #bf521d 100%) !important;
}
.ups-card-grad-fuel {
    background: linear-gradient(135deg, #04142b 0%, #004d7a 100%) !important;
}

/* --- 2. Секція відгуків --- */
.ups-works-reviews {
    padding-top: 80px;
    padding-bottom: 100px;
    background-color: #FFFFFF;
}

.ups-review-card {
    padding: 40px 30px;
    background: #FAFAFA;
    border: 1px solid #E5E5E5;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ups-review-card:hover {
    transform: translateY(-5px);
    border-color: #222222;
    background: #FFFFFF;
    box-shadow: 10px 10px 0px rgba(230, 116, 58, 0.08);
}

.ups-review-stars {
    color: #E6743A;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.ups-review-text {
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 30px;
    font-style: italic;
    flex-grow: 1;
}

.ups-review-author {
    display: flex;
    align-items: center;
    border-top: 1px solid #E5E5E5;
    padding-top: 20px;
}

.ups-author-avatar {
    width: 48px;
    height: 48px;
    background-color: #E5E5E5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #222222;
    margin-right: 15px;
    border: 2px solid #E6743A;
    font-family: "Irpn", serif;
}

.ups-author-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 4px 0;
}

.ups-author-info p {
    font-size: 13px;
    color: #888888;
    margin: 0;
}

.ups-review-quote-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 60px;
    line-height: 1;
    color: rgba(230, 116, 58, 0.08);
    font-family: "Georgia", serif;
    pointer-events: none;
}

@media (min-width: 992px) {
    .ups-works-reviews {
        padding-top: 100px;
        padding-bottom: 140px;
    }
}

/* --- 3. Секція CTA для сторінки робіт --- */
.ups-works-cta {
    padding: 80px 0;
    background-color: #1e2021;
    background-image: radial-gradient(rgba(230, 116, 58, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ups-works-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background-color: #E6743A;
}

@media (min-width: 992px) {
    .ups-works-cta {
        padding: 100px 0;
    }
}

/* =========================================
   AJAX SUCCESS STATE & FORM VALIDATION STYLES
   ========================================= */

.ups-form-input.is-invalid {
    border-bottom-color: #dc3545 !important;
}

.ups-form-input.is-invalid ~ .ups-form-label {
    color: #dc3545 !important;
}

.ups-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
    animation: upsFadeInSuccess 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes upsFadeInSuccess {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ups-success-title {
    font-size: 26px;
    font-weight: 700;
    color: #222222;
    margin-top: 10px;
    margin-bottom: 15px;
    font-family: "Irpn", serif;
}

.ups-success-desc {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 35px;
}

.ups-success-close-btn {
    min-width: 150px;
    text-align: center;
}

/* --- ANIMATED SVG CHECKMARK --- */
.ups-checkmark-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    display: block;
}

.ups-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke: #E6743A;
    fill: none;
    animation: upsStrokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.ups-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke: #E6743A;
    fill: none;
    animation: upsStrokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes upsStrokeCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes upsStrokeCheck {
    to {
        stroke-dashoffset: 0;
    }
}

.ups-error-message {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 11px;
    color: #dc3545;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    pointer-events: none;
    font-weight: 500;
}

.ups-form-input.is-invalid ~ .ups-error-message {
    opacity: 1;
    transform: translateY(0);
}

/* Policy Page Styles */
.ups-policy-wrap {
    background-color: #FAFAFA;
    color: #272727;
    padding-top: 60px;
    padding-bottom: 100px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.ups-policy-nav {
    position: sticky;
    top: 110px;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.ups-policy-nav ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.ups-policy-nav li {
    margin-bottom: 16px;
}

.ups-policy-nav li:last-child {
    margin-bottom: 0;
}

.ups-policy-nav a {
    color: #555555;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.ups-policy-nav a:hover,
.ups-policy-nav a.active {
    color: #E6743A;
    transform: translateX(5px);
}

.ups-policy-content {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.policy-section-block {
    margin-bottom: 50px;
    scroll-margin-top: 120px;
}

.policy-section-block:last-child {
    margin-bottom: 0;
}

.ups-policy-content h2 {
    font-size: 24px;
    font-weight: 900;
    color: #272727;
    margin-top: 0;
    margin-bottom: 24px;
    font-family: "Irpn", serif;
    position: relative;
    padding-bottom: 12px;
}

.ups-policy-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #E6743A;
}

.ups-policy-content p {
    font-size: 16px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 18px;
}

.ups-policy-content p:last-child {
    margin-bottom: 0;
}

.ups-policy-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
    margin-bottom: 20px;
}

.ups-policy-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
}

.ups-policy-content ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #E6743A;
    border-radius: 2px;
}

.ups-policy-content a {
    transition: color 0.3s ease;
}

.ups-policy-content a:hover {
    color: #ff854e;
}