@charset "UTF-8";

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 0;
}

* {
   -webkit-overflow-scrolling: touch;
}

html,
body {
   margin: 0;
   padding: 0;
   background: #05060e;
}

body {
   font-family: "Inter", system-ui, sans-serif;
   color: #fff;
   -webkit-font-smoothing: antialiased;
}

::selection {
   background: rgba(70, 54, 227, 0.55);
   color: #fff;
}

img,
svg,
video {
   max-width: 100%;
}

a {
   color: #ffd608;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

button {
   font-family: inherit;
}

.page {
   position: relative;
   z-index: 0;
   isolation: isolate;
   min-height: 100vh;
   overflow-x: clip;
   background: #05060e;
   color: #fff;
}

.container {
   max-width: 1690px;
   margin: 0 auto;
}

.section {
   position: relative;
   padding: 140px 30px 0;
}

.section--tight {
   padding-top: 60px;
}

.section__bg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 118%;
   height: auto;
   z-index: -1;
   opacity: 0.6;
   mix-blend-mode: screen;
   pointer-events: none;
}

.panel {
   position: relative;
   max-width: 1690px;
   margin: 0 auto;
   padding: clamp(28px, 4vw, 52px) clamp(12px, 3.2vw, 48px);
   border-radius: clamp(22px, 3.4vw, 60px);
   overflow: hidden;
}

.panel--indigo {
   background: #3A26AE;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.panel--flat {
   padding: 30px clamp(16px, 3.4vw, 52px);
}

.panel--tall {
   padding: clamp(34px, 5vw, 70px) clamp(20px, 4vw, 60px);
   touch-action: pan-y pan-x;
   /* Дозволяє скролл і свайп */
}

.panel--glass {
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel--contact {
   padding: clamp(34px, 5vw, 86px) clamp(24px, 5vw, 96px);
   border-radius: clamp(22px, 3.4vw, 54px);
   border-color: rgba(255, 255, 255, 0.1);
}

.panel__text {
   position: relative;
   padding: clamp(8px, 2vw, 26px) 0 clamp(8px, 2vw, 26px) clamp(8px, 2.4vw, 34px);
}

.panel__text--static {
   padding: clamp(10px, 2vw, 30px) 0;
   pointer-events: none;
}

.panel__lead {
   margin: clamp(12px, 2.6vw, 38px) 0 0;
   max-width: 620px;
   font-size: clamp(14px, 1.2vw, 20px);
   line-height: 1.6;
   color: #fff;
   text-wrap: pretty;
}

.panel__lead--near {
   margin-top: 22px;
}

.panel__media {
   position: relative;
   width: 100%;
}

.panel__img {
   display: block;
   width: 100%;
   height: auto;
}

.panel__hint {
   position: absolute;
   top: 18px;
   right: 24px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55);
   pointer-events: none;
}

.split {
   display: grid;
   gap: 40px;
   align-items: center;
}

.split--wide {
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.split--narrow {
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
   gap: 60px;
}

.split--even {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 44px;
}

.split--duo {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 36px;
   margin-top: 64px;
}

.split--head {
   grid-template-columns: minmax(0, 1fr) 500px;
   gap: 60px;
   align-items: start;
}

.split--aside {
   grid-template-columns: minmax(0, 1fr) 430px;
   gap: 60px;
   align-items: start;
}

.panel--contact.split {
   gap: clamp(30px, 5vw, 90px);
}

.sticky-col {
   position: sticky;
   top: 100px;
   align-self: start;
}

.h2 {
   margin: 0;
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(36px, 6vw, 72px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.h2--md {
   font-size: clamp(28px, 3.4vw, 54px);
   line-height: 1;
   letter-spacing: 0.5px;
}

.h2--lg {
   font-size: clamp(30px, 5.8vw, 72px);
   line-height: 1;
   letter-spacing: 0.5px;
}

.h2--xl {
   font-size: clamp(32px, 6.4vw, 82px);
   line-height: 1;
   letter-spacing: 1px;
}

.h2--center {
   text-align: center;
}

.h2--tight {
   width: 100%;
   max-width: 600px;
}

.lead {
   margin: 0;
   font-size: clamp(16px, 1.6vw, 22px);
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.85);
}

.lead--wide {
   margin: clamp(20px, 2vw, 44px) 0 0;
   max-width: 100%;
   font-size: clamp(16px, 1.6vw, 22px);
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.88);
   text-wrap: pretty;
}

.badge {
   display: grid;
   place-items: center;
   width: clamp(40px, 3vw, 50px);
   height: clamp(40px, 3vw, 50px);
   margin-bottom: clamp(20px, 2vw, 50px);
}

.accent-underline {
   position: relative;
   display: inline-block;
   color: #ffd608;
}

.accent-underline__stroke {
   position: absolute;
   left: 0;
   top: 102%;
   width: 100%;
   height: 20px;
   overflow: visible;
   pointer-events: none;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   border: none;
   cursor: pointer;
   font-family: inherit;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
   transition: transform 0.12s ease, filter 0.15s ease;
}

.btn:hover {
   text-decoration: none;
}

.btn:active {
   transform: scale(0.96);
}

.btn--m {
   height: 38px;
   padding: 0 26px;
   border-radius: 16px;
   font-size: 13px;
   letter-spacing: 1px;
}

.btn--l {
   height: 45px;
   padding: 0 26px;
   border-radius: 16px;
   font-size: 14px;
   letter-spacing: 0.6px;
}

.btn--xl {
   height: 56px;
   padding: 0 44px;
   border-radius: 18px;
   font-size: 16px;
   letter-spacing: 1.2px;
}

.btn--yellow {
   background: #ffd608;
   color: #0c0c14;
}

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

.btn--white {
   background: #fff;
   color: #14162e;
   padding: 0 26px;
   text-transform: none;
   letter-spacing: 0;
}

.field {
   display: flex;
   align-items: center;
   gap: 12px;
   height: 56px;
   padding: 0 26px;
   border: none;
   border-radius: 18px;
   font-family: inherit;
   font-size: 15px;
}

.field--light {
   background: #fff;
   width: min(470px, 100%);
}

.field--dark {
   padding: 0 24px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(255, 255, 255, 0.16);
   color: #fff;
}

input.field--dark {
   outline: none;
}

input.field--dark::placeholder {
   color: rgba(255, 255, 255, 0.55);
}

.field__input {
   flex: 1;
   min-width: 0;
   background: transparent;
   border: none;
   outline: none;
   font-family: inherit;
   font-size: 15px;
   letter-spacing: 0.3px;
   color: #111;
}

.field--dark .field__input {
   color: #fff;
}

.field--dark .field__input::placeholder {
   color: rgba(255, 255, 255, 0.55);
}

.field__flag {
   flex: none;
   border-radius: 2px;
}

.field__caret {
   font-size: 9px;
   color: rgba(255, 255, 255, 0.6);
}

.deco {
   position: absolute;
   display: block;
   pointer-events: none;
}

.deco--a {
   top: 0;
   right: 26%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--b {
   top: 110px;
   right: calc(26% + 110px);
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--c {
   bottom: 0;
   right: 8%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--d {
   top: 0;
   left: 38%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--dc {
   bottom: 0;
   left: 31%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--e {
   top: 0;
   right: 14%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--f {
   top: 120px;
   right: calc(14% + 120px);
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--g {
   bottom: 0;
   left: 34%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--h {
   top: 0;
   left: 48%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--i {
   top: 120px;
   left: calc(48% + 120px);
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--j {
   bottom: 0;
   left: 40%;
   width: 150px;
   height: 150px;
   background: #34229D;
}

.deco--k {
   top: 11%;
   left: 20%;
   width: 34%;
   height: 32%;
   background: #34229D;
}

.deco--l {
   top: 43%;
   left: 0;
   width: 22%;
   height: 30%;
   background: #34229D;
}

.deco--m {
   bottom: 0;
   left: 26%;
   width: 26%;
   height: 26%;
   background: #34229D;
}

.deco--n {
   top: 36%;
   right: 8%;
   width: 24%;
   height: 34%;
   background: #34229D;
}

.deco--o {
   top: 0;
   left: 53%;
   width: 17%;
   height: 39%;
   background: #34229D;
}

.deco--p {
   top: 22%;
   left: 70%;
   width: 16%;
   height: 44%;
   background: #34229D;
}

.deco--q {
   bottom: 0;
   left: 61%;
   width: 16%;
   height: 40%;
   background: #34229D;
}

.deco--r {
   bottom: 0;
   left: 87%;
   width: 13%;
   height: 34%;
   background: #34229D;
}

.page__bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   pointer-events: none;
}

.bg-band {
   position: absolute;
   width: min(700px, 72vw);
   opacity: 0.5;
   mix-blend-mode: screen;
}

.bg-band--left {
   left: 0;
}

.bg-band--right {
   right: 0;
}

.bg-band--r1 {
   top: calc(120vh + 120px);
}

.bg-band--l1 {
   top: 24%;
}

.bg-band--l2 {
   top: 37%;
}

.bg-band--r2 {
   top: 43%;
}

.bg-band--l3 {
   top: 82%;
}

.bg-band--qb {
   top: calc(100vh + 500px);
}

.bg-band--pr1 {
   top: 63%;
}

.bg-band--pr2 {
   top: calc(100vh + 1200px);
}

.bg-band--faq {
   position: absolute;
   top: 74%;
   width: 100%;
   mix-blend-mode: screen;
   opacity: 0.5;
   pointer-events: none;
}

.bg-band--r3 {
   bottom: 0;
}

.bg-band--bottom {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   opacity: 0.6;
}

.page__top {
   position: relative;
   padding-top: 78px;
}

.hero-media {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 100vh;
   overflow: hidden;
   pointer-events: none;
}

.hero-media__gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, #1b2fbb 0%, #2a1d8f 34%, #0a0a26 72%, #05060e 100%);
}

.hero-media__video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-media__video::-webkit-media-controls {
   display: none !important;
}

.hero-media__video::-webkit-media-controls-start-playback-button {
   display: none !important;
}

.hero-media__veil {
   position: absolute;
   inset: 0;
   background: rgba(5, 6, 14, 0);
}

.hero-media__fade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(5, 6, 14, 0) 45%, #05060e 96%);
}

.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   height: 78px;
   transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.header--scrolled {
   background: rgb(5 6 14 / 38%);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   box-shadow: 0 2px 20px rgb(0 0 0 / 7%);
   border-bottom: 1px solid #ffffff2e;
}

.header__inner {
   display: flex;
   align-items: center;
   gap: 52px;
   width: 100%;
   max-width: 1690px;
   margin: 0 auto;
   padding: 0 clamp(16px, 3vw, 30px);
}

.header__logo {
   display: block;
   line-height: 0;
}

.header__logo img {
   display: block;
   width: 236px;
   height: auto;
}

.header__actions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 26px;
}

.nav {
   display: flex;
   align-items: center;
   gap: 44px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
}

.nav__link {
   color: #fff;
   transition: opacity 0.15s ease;
}

.nav__link:hover {
   opacity: 0.75;
   text-decoration: none;
}

.nav__link.is-active {
   color: #ffd608;
}

.dropdown {
   position: relative;
   display: flex;
   align-items: center;
}

.dropdown__toggle {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   transition: opacity 0.15s ease;
}

.dropdown__toggle:hover {
   opacity: 0.75;
}

.dropdown__caret {
   flex: none;
   transition: transform 0.35s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.dropdown.is-open .dropdown__caret {
   transform: rotate(180deg);
}

.dropdown__menu {
   position: absolute;
   top: calc(100% + 16px);
   left: -18px;
   z-index: 30;
   display: grid;
   gap: 14px;
   max-height: 0;
   padding: 0 22px;
   border-radius: 18px;
   background: rgba(9, 10, 26, 0.9);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 24px 50px rgba(4, 3, 26, 0.5);
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
   transition: max-height 0.4s cubic-bezier(0.33, 0.9, 0.28, 1), opacity 0.28s ease, padding 0.4s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.dropdown.is-open .dropdown__menu {
   max-height: 240px;
   padding: 18px 22px;
   opacity: 1;
   pointer-events: auto;
}

.dropdown__item {
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: none;
   white-space: nowrap;
   transition: color 0.15s ease;
}

.dropdown__item:hover {
   color: #ffd608;
   text-decoration: none;
}

.lang {
   position: relative;
   display: flex;
   align-items: center;
}

.lang__toggle {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 1px;
   transition: opacity 0.15s ease;
}

.lang__toggle:hover {
   opacity: 0.75;
}

.lang.is-open .dropdown__caret {
   transform: rotate(180deg);
}

.lang__menu {
   position: absolute;
   top: calc(100% + 16px);
   right: -14px;
   z-index: 30;
   display: grid;
   gap: 12px;
   max-height: 0;
   padding: 0 20px;
   border-radius: 16px;
   background: rgba(9, 10, 26, 0.9);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 24px 50px rgba(4, 3, 26, 0.5);
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
   transition: max-height 0.4s cubic-bezier(0.33, 0.9, 0.28, 1), opacity 0.28s ease, padding 0.4s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.lang.is-open .lang__menu {
   max-height: 200px;
   padding: 16px 20px;
   opacity: 1;
   pointer-events: auto;
}

.lang__item {
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   text-align: left;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   transition: color 0.15s ease;
}

.lang__item.is-active {
   color: #ffd608;
}

.burger {
   display: block;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   line-height: 0;
}

.burger__icon {
   transition: transform 0.4s cubic-bezier(0.33, 0.9, 0.28, 1);
}

body.is-menu-open .burger__icon {
   transform: rotate(135deg) scale(0.92);
}

.mobile-menu {
   position: fixed;
   inset: 0;
   z-index: 90;
   display: flex;
   flex-direction: column;
   padding: 100px 20px 34px;
   background: radial-gradient(86% 52% at 2% 86%, rgba(20, 38, 180, 0.5) 0%, rgba(5, 6, 14, 0) 74%), radial-gradient(86% 60% at 98% 4%, rgba(20, 38, 180, 0.5) 0%, rgba(5, 6, 14, 0) 74%), #05060e;
   visibility: hidden;
   opacity: 0;
   transform: translateY(-14px);
   pointer-events: none;
   transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.mobile-menu.is-open {
   visibility: visible;
   opacity: 1;
   transform: none;
   pointer-events: auto;
   height: 100vh;
}

.mobile-menu__top {
   position: absolute;
   top: 0;
   left: 20px;
   right: 20px;
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: space-between;
   height: 100px;
}

.mobile-menu__logo {
   display: block;
   width: 176px;
   max-width: 176px;
   height: auto;
}

.mobile-menu__lang {
   margin-left: auto;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
}

.mobile-menu__close {
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   line-height: 0;
   transform: rotate(135deg);
}

.mobile-menu__body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   margin-top: 60px;
}

.mobile-menu__rule {
   height: 1px;
   background: rgba(255, 255, 255, 0.16);
}

.mobile-menu__row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   padding: 22px 0;
   border: 0;
   background: none;
   cursor: pointer;
   text-align: left;
}

.mobile-menu__row:hover {
   text-decoration: none;
}

.mobile-menu__title {
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: 24px;
   font-weight: 700;
   letter-spacing: 0.6px;
   text-transform: uppercase;
   color: #fff;
}

.mobile-menu__caret {
   flex: none;
   transition: transform 0.35s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.mobile-menu__row[aria-expanded=true] .mobile-menu__caret {
   transform: rotate(180deg);
}

.mobile-menu__sub {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
   transition: grid-template-rows 0.45s cubic-bezier(0.33, 0.9, 0.28, 1), opacity 0.3s ease;
}

.mobile-menu__sub.is-open {
   grid-template-rows: 1fr;
   opacity: 1;
}

.mobile-menu__sub-inner {
   display: grid;
   gap: 20px;
   overflow: hidden;
}

.mobile-menu__sub-link {
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.8px;
   line-height: 1.35;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
}

.mobile-menu__sub-link:hover {
   text-decoration: none;
}

.mobile-menu__sub-link.is-active {
   color: #ffd608;
}

.mobile-menu__sub-link:last-child {
   padding-bottom: 22px;
}

.mobile-menu__cta {
   flex: none;
   width: 100%;
   height: 52px;
}

.hero {
   position: relative;
   z-index: 5;
   padding: 0 30px;
   text-align: center;
}

.hero__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 1300px;
   margin: 0 auto;
   min-height: calc(100vh - 78px);
   padding-bottom: 10vh;
}

.hero__title {
   margin: 0;
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(34px, 12.6vw, 100px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   text-wrap: balance;
}

.hero__lead {
   margin: clamp(24px, 3vw, 44px) auto 0;
   max-width: 720px;
   font-size: clamp(14px, 1.35vw, 18px);
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
   text-wrap: pretty;
}

.hero__form {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: clamp(22px, 2.6vw, 36px);
}

.phones {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 36px;
   margin: -26vh auto 0;
}

.phones__item {
   position: relative;
   flex: none;
   margin: 0;
   border-radius: 34px;
   filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

.phones__item img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.phones__item--side {
   height: 770px;
   margin-top: 130px;
}

.phones__item:nth-child(1) {
   width: 299px;
}

.phones__item:nth-child(3) {
   width: 319px;
}

.phones__item--center {
   z-index: 2;
   width: 398px;
   height: 818px;
   border-radius: 36px;
   filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.55));
}

.channel {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 28px;
   padding: 34px 34px 30px;
   border-radius: 60px;
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   overflow: hidden;
}

.channel::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 120px;
   background: linear-gradient(180deg, rgba(58, 38, 174, 0) 0%, rgba(58, 38, 174, 0.25) 100%);
   pointer-events: none;
}

.channel__media {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   background: #0d0f22;
   z-index: 1;
}

.channel__media img {
   display: block;
   width: 100%;
   height: auto;
}

.channel__text {
   position: relative;
   z-index: 1;
   margin: 0 auto;
   max-width: 620px;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.6;
   letter-spacing: 0.6px;
   text-transform: uppercase;
   text-align: center;
   color: #fff;
}

.charts {
   position: relative;
   width: 100%;
   aspect-ratio: 100/68;
}

.charts__item {
   position: absolute;
   margin: 0;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   will-change: transform;
}

.charts__item img {
   display: block;
   width: 100%;
   height: auto;
}

.charts__item--1 {
   left: 2%;
   top: 2%;
   width: 57%;
   box-shadow: 0 26px 50px rgba(6, 4, 40, 0.4);
}

.charts__item--2 {
   right: 1%;
   top: 26%;
   width: 55%;
   z-index: 2;
   box-shadow: 0 26px 50px rgba(6, 4, 40, 0.42);
}

.charts__item--3 {
   left: 8%;
   bottom: 0;
   width: 52%;
   z-index: 3;
   box-shadow: 0 30px 60px rgba(6, 4, 40, 0.5);
}

.qbslider {
   position: sticky !important;
   top: 80px;
   align-self: start;
   height: clamp(460px, 54vw, 760px);
   border-radius: 38px;
   touch-action: pan-y;
}

.qbslider__slide {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 70%;
   height: 86%;
   transform: translate(-50%, -50%);
   opacity: 0.9;
   filter: brightness(0.62);
   z-index: 2;
   cursor: pointer;
   will-change: transform;
   transition: transform 1.05s cubic-bezier(0.33, 0.9, 0.28, 1), opacity 0.9s cubic-bezier(0.33, 0.9, 0.28, 1), filter 1.05s cubic-bezier(0.33, 0.9, 0.28, 1), height 1.05s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.qbslider__slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.qbslider__slide.is-active {
   height: 100%;
   opacity: 1;
   z-index: 5;
   cursor: grab;
   filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.55));
}

.features {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-top: 46px;
}

.feature {
   padding: clamp(34px, 4.4vw, 58px) clamp(24px, 2.6vw, 42px);
   border-radius: 36px;
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
   transition: background 0.4s ease, border-color 0.4s ease;
}
.feature::after {
   position: absolute;
   content: "";
   bottom: 0;
   left: 0;
   right: 0;
   height: 140px;
   background: linear-gradient(180deg, rgba(58, 38, 174, 0) 0%, rgba(58, 38, 174, 0.22) 100%);
   pointer-events: none;
   overflow: hidden;
   border-radius: 30px;
}

.feature.is-active {
   background: rgba(255, 255, 255, 0.055);
   border-color: rgba(255, 255, 255, 0.2);
}

.feature__title {
   margin: 0;
   font-size: clamp(19px, 1.5vw, 25px);
   font-weight: 700;
   letter-spacing: -0.2px;
   color: #ffd608;
}

.feature__text {
   margin: 18px 0 0;
   font-size: clamp(14px, 1vw, 16px);
   line-height: 1.75;
   color: rgba(255, 255, 255, 0.82);
   text-wrap: pretty;
}

.whitelabel {
   position: relative;
   height: clamp(320px, 42vw, 610px);
   align-self: end;
   margin-bottom: calc(-1 * clamp(34px, 5vw, 70px));
   touch-action: pan-y pan-x;
   /* Дозволяє вертикальний скролл і горизонтальний свайп */
   pointer-events: none;
   /* Дозволяє свайп/скролл через блок */
}

.whitelabel img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: bottom;
}

.chip {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 16px;
   border-radius: 100px;
   background: #fff;
   color: #14162e;
   font-family: "Inter", system-ui, sans-serif;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: -0.1px;
   white-space: nowrap;
   user-select: none;
   cursor: grab;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
   transform: translate(-300px, -300px);
   will-change: transform;
   pointer-events: auto;
   touch-action: none;
   /* Дозволяє взаємодію тільки з чіпами, touch-action:none для драгу */
}

.chip__lock {
   display: flex;
   align-items: center;
   gap: 10px;
}

.chip__lock::after {
   content: "";
   width: 1px;
   height: 16px;
   background: rgba(20, 22, 46, 0.22);
}

.chip--brand {
   padding: 13px 24px;
   color: #3A26AE;
   font-weight: 800;
   font-size: 17px;
   letter-spacing: 0.3px;
   box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.cta-box {
   margin-top: 36px;
   padding: 28px 30px;
   border: 1px solid #ffd608;
   border-radius: 26px;
}

.cta-box__title {
   margin: 0;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: -0.2px;
}

.cta-box__text {
   margin: 12px 0 22px;
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.8);
}

.coverflow {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: clamp(430px, 46vw, 660px);
}

.coverflow__nav {
   position: absolute;
   top: 50%;
   z-index: 9;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.16);
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   transition: background 0.15s ease;
}

.coverflow__nav:hover {
   background: rgba(255, 255, 255, 0.24);
}

.coverflow__nav--prev {
   left: 0;
}

.coverflow__nav--next {
   right: 0;
}

.coverflow__track {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   perspective: 1400px;
}

.coverflow__slide {
   position: absolute;
   top: 50%;
   left: 50%;
   opacity: 0.55;
   filter: brightness(0.7);
   z-index: 2;
   pointer-events: none;
   transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease, filter 0.5s ease, height 0.5s ease;
}

.coverflow__slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.coverflow__slide.is-active {
   width: 100% !important;
   opacity: 1;
   z-index: 5;
   pointer-events: auto;
   filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.plans {
   max-width: 1120px;
   margin-left: auto;
   margin-right: auto;
   margin-top: clamp(30px, 3.4vw, 52px);
   gap: clamp(20px, 2.2vw, 34px);
}

.plan {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: clamp(50px, 4.6vw, 60px) clamp(24px, 3.6vw, 48px);
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 60px rgba(4, 3, 26, 0.45);
   transition: background-color 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.plan:hover {
   background-color: rgba(74, 55, 240, 0.16);
   border-color: rgba(120, 110, 255, 0.55);
}

.plan::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 140px;
   background: linear-gradient(180deg, rgba(58, 38, 174, 0) 0%, rgba(58, 38, 174, 0.22) 100%);
   pointer-events: none;
   overflow: hidden;
   border-radius: 50px;
}

.plan--pro {
   background: rgba(255, 255, 255, 0.045);
   transition: background-color 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.plan--pro:hover {
   background-color: rgba(74, 55, 240, 0.16);
   border-color: rgba(120, 110, 255, 0.55);
}

.plan__pattern {
   position: absolute;
   top: 26px;
   right: 26px;
   opacity: 1;
   line-height: 0;
   pointer-events: none;
}

.plan__name {
   margin: 0;
   font-size: clamp(28px, 2.7vw, 36px);
   font-weight: 700;
   letter-spacing: -0.2px;
   color: #fff;
   position: relative;
}

.icon_smile {
   max-width: 80px;
   position: absolute;
   top: -93px;
}

.plan__rule {
   height: 1px;
   background: rgba(255, 255, 255, 0.14);
   margin: 22px 0 24px;
}

.plan__price {
   display: flex;
   align-items: baseline;
   gap: 9px;
   margin: 10px 0 0;
}

.plan__price--month {
   margin-top: 0;
}

.plan__num {
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(30px, 2.9vw, 40px);
   font-weight: 700;
   line-height: 1;
   color: #ffd608;
   position: relative;
}

.plan__num--white {
   color: #fff;
}

.plan__per {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.85);
}

.plan__save {
   padding: 4px 5px;
   border-radius: 7px;
   background: #ff3b30;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.2px;
}

.plan__list {
   list-style: none;
   margin: 30px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.plan__item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14px;
   line-height: 1.45;
   color: rgba(255, 255, 255, 0.92);
}

.plan__item--off {
   color: rgba(255, 255, 255, 0.5);
}

.plan__dot {
   display: grid;
   place-items: center;
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: 1px;
   border-radius: 50%;
   background: #ffd608;
}

.plan__item--off .plan__dot {
   background: rgba(255, 255, 255, 0.22);
}

.plan__cta {
   position: relative;
   z-index: 1;
   width: 100%;
   margin-top: 36px;
}

.faq {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.faq__row {
   padding: clamp(22px, 2vw, 30px) clamp(24px, 2.2vw, 34px);
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.03);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
   cursor: pointer;
   transition: border-color 0.25s ease, background 0.25s ease;
}

.faq__row.is-open {
   background: rgba(74, 55, 240, 0.16);
   border-color: rgba(120, 110, 255, 0.55);
}

.faq__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   width: 100%;
   padding: 0;
   border: 0;
   background: none;
   text-align: left;
   pointer-events: none;
}

.faq__q {
   margin: 0;
   flex: 1;
   font-size: clamp(15px, 1.25vw, 19px);
   font-weight: 700;
   line-height: 1.35;
   color: #fff;
   pointer-events: none;
}

.faq__sign {
   display: grid;
   place-items: center;
   flex: none;
   width: 22px;
   height: 22px;
   color: #4a7dff;
   font-size: 26px;
   font-weight: 300;
   line-height: 1;
   pointer-events: none;
   transition: transform 0.45s cubic-bezier(0.33, 0.9, 0.28, 1);
}

.faq__row.is-open .faq__sign {
   transform: rotate(180deg);
}

.faq__body {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
   transition: grid-template-rows 0.5s cubic-bezier(0.33, 0.9, 0.28, 1), opacity 0.4s ease;
}

.faq__row.is-open .faq__body {
   grid-template-rows: 1fr;
   opacity: 1;
}

.faq__body-inner {
   overflow: hidden;
}

.faq__rule {
   height: 1px;
   background: rgba(255, 255, 255, 0.14);
   margin: 22px 0 20px;
}

.faq__a {
   margin: 0;
   font-size: clamp(13px, 1.02vw, 15px);
   line-height: 1.75;
   color: rgba(255, 255, 255, 0.82);
   text-wrap: pretty;
}

.logos-wrap {
   position: relative;
   margin-top: clamp(38px, 5vw, 80px);
}

.logos {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: clamp(10px, 1.2vw, 20px);
}

.logos__item {
   position: relative;
   padding: 14px 16px;
   border-radius: 18px;
   background: #fff;
   aspect-ratio: 1/0.72;
   overflow: hidden;
   transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.logos__item:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 30px rgba(4, 3, 26, 0.45);
}

.logos__item img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.swipe-hint {
   display: none;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 14px 0 0;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55);
}

.swipe-hint svg {
   animation: qbSwipe 1.6s ease-in-out infinite;
}

.contact {
   max-width: 520px;
}

.contact__lead {
   margin: clamp(18px, 2vw, 28px) 0 0;
   max-width: 420px;
   font-size: clamp(14px, 1.15vw, 18px);
   line-height: 1.55;
   color: #fff;
   text-wrap: pretty;
}

.contact__form {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: clamp(24px, 3vw, 44px);
}

.contact__note {
   margin: 2px 0 0;
   font-size: 12px;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.6);
}

.contact__note a {
   color: #ffd608;
   text-decoration: underline;
}

.sales {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: clamp(34px, 4vw, 64px) clamp(24px, 3vw, 48px);
   border-radius: clamp(20px, 2.6vw, 38px);
   background: #3A26AE;
   overflow: hidden;
   text-align: center;
   height: 100%;
   justify-content: center;
}

.sales__label {
   position: relative;
   margin: 0;
   font-size: clamp(18px, 1.7vw, 26px);
   font-weight: 700;
   color: #fff;
}

.sales__phone {
   position: relative;
   margin-top: 5px;
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(36px, 4.9vw, 62px);
   font-weight: 700;
   letter-spacing: 0.5px;
   color: #fff;
}

.sales__mail {
   position: relative;
   font-size: clamp(17px, 1.7vw, 26px);
   font-weight: 700;
   color: #fff;
}

.sales__phone:hover,
.sales__mail:hover {
   text-decoration: none;
   opacity: 0.85;
}

.sales__cta {
   position: relative;
   margin-top: clamp(20px, 2.4vw, 34px);
}

.footer {
   padding: 96px 30px 40px;
}

.footer__inner {
   position: relative;
   max-width: 1690px;
   margin: 0 auto;
   padding: clamp(30px, 4.4vw, 72px) clamp(24px, 3.6vw, 62px);
   border-radius: clamp(22px, 3.4vw, 44px);
   background: #3A26AE;
   overflow: hidden;
}

.footer__top {
   position: relative;
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 30px;
}

.footer__brand {
   margin-right: auto;
}

.footer__logo {
   display: block;
   height: clamp(30px, 3vw, 50px);
}

.footer__tagline {
   margin: clamp(16px, 1.8vw, 26px) 0 0;
   font-size: clamp(14px, 1.15vw, 18px);
   font-weight: 700;
   color: #fff;
}

.footer__region {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
}

.footer__region-label {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
}

.footer__region-value {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   color: #fff;
}

.footer__region-caret {
   font-size: 9px;
}

.footer__rule {
   position: relative;
   height: 1px;
   background: rgba(255, 255, 255, 0.28);
   margin: clamp(30px, 4vw, 58px) 0 clamp(20px, 2.6vw, 36px);
}

.footer__bottom {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 20px;
   font-size: clamp(13px, 1.05vw, 16px);
   color: #fff;
}

.footer__bottom a {
   color: #fff;
   transition: color 0.15s ease;
}

.footer__bottom a:hover {
   color: #ffd608;
   text-decoration: none;
}

.icon_like {
   position: absolute;
   left: -37px;
   margin-top: -19px;
}

@keyframes qbHeroIn {
   from {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
   }

   to {
      opacity: 1;
      transform: none;
      filter: blur(0);
   }
}

@keyframes qbHeroDrop {
   from {
      opacity: 0;
      transform: translateY(-16px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes qbSwipe {

   0%,
   100% {
      transform: translateX(0);
      opacity: 0.55;
   }

   50% {
      transform: translateX(6px);
      opacity: 1;
   }
}

[data-fade-in] {
   opacity: 0;
   animation: qbHeroIn 0.9s cubic-bezier(0.22, 0.75, 0.25, 1) both;
   animation-delay: var(--delay, 0s);
}

[data-drop-in] {
   opacity: 0;
   animation: qbHeroDrop 0.7s cubic-bezier(0.22, 0.75, 0.25, 1) both;
   animation-delay: var(--delay, 0s);
}

[data-reveal] {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
   transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
   opacity: 1;
   transform: none;
   position: relative;
}

[data-fly] {
   will-change: transform;
}

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

   [data-fade-in],
   [data-drop-in] {
      animation: none;
      opacity: 1;
   }

   [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
   }
}

@media (max-width: 1520px) {
   .h2--xl {
      font-size: clamp(32px, 6.4vw, 72px);
      line-height: 1;
      letter-spacing: 1px;
   }
}

@media (max-width: 1180px) {
   .phones {
      zoom: 0.78;
   }
}

@media (min-width: 993px) and (max-width: 1180px) {
   .logos {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
}

@media (max-width: 992px) {
   .logos {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-template-rows: repeat(3, auto);
      grid-auto-columns: min(36vw, 200px);
      align-items: start;
      overflow-x: auto;
      overflow-y: hidden;
      touch-action: pan-x pan-y;
      scroll-snap-type: x proximity;
      scroll-padding-right: 22vw;
      padding-bottom: 6px;
      scrollbar-width: none;
   }

   .logos::-webkit-scrollbar {
      display: none;
   }

   .logos>* {
      scroll-snap-align: start;
   }

   .logos-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 6px;
      right: 0;
      width: 38px;
      pointer-events: none;
   }

   .swipe-hint {
      display: flex;
   }
}

@media (min-width: 981px) {
   .mobile-menu {
      display: none;
   }
}

@media (max-width: 980px) {

   .section,
   .footer {
      padding-left: 20px;
      padding-right: 20px;
   }

   .section,
   .footer {
      padding-top: 60px;
   }

   .hero {
      padding-top: 0;
   }

   .header__inner {
      padding-left: 20px;
      padding-right: 20px;
   }

   .h2,
   .h2--md,
   .h2--lg,
   .h2--xl {
      font-size: 68px;
      letter-spacing: 0.8px;
      line-height: 1;
   }

   .h2--tight {
      max-width: 100%;
   }

   .split,
   .split--wide,
   .split--narrow,
   .split--even,
   .split--duo,
   .split--head,
   .split--aside {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
   }

   .split--flip>*:first-child {
      order: 2;
   }

   .nav,
   .header__login {
      display: none;
   }

   .phones {
      zoom: 0.6;
   }

   .whitelabel {
      align-self: end;
      width: 80%;
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
   }

   .sticky-col,
   .qbslider {
      position: relative;
      top: auto;
   }

   .chip {
      padding: 7px 12px;
      gap: 6px;
      font-size: 11px;
   }

   .chip--brand {
      padding: 10px 19px;
      font-size: 13px;
   }

   /* Mobile app block стиль */
   .section--tight {
      padding: 20px 16px 60px;
   }

   .panel--indigo {
      border-radius: 32px;
      padding: 40px 14px 0;
      display: flex;
      flex-direction: column;
   }

   .panel--indigo.panel--tall {
      border-radius: 32px;
      padding: 40px 14px 0;
      display: flex;
      flex-direction: column-reverse;
   }

   .panel--indigo .panel__text {
      order: 1;
      margin-bottom: 10px;
   }

   .panel--indigo .panel__media {
      order: 2;
      margin-bottom: 0 !important;
   }

   .panel--indigo .h2--xl {
      font-size: clamp(34px, 7vw, 40px);
      line-height: 1.1;
      margin-top: 36px;
      margin-bottom: 16px;
   }

   .panel--indigo .panel__lead {
      font-size: clamp(14px, 3.5vw, 16px);
      line-height: 1.5;
   }
}

@media (max-width: 640px) {
   .plan__price {
      display: flex;
      align-items: baseline;
      gap: 9px;
      margin: 0px 0 0;
   }

   .plan__num {
      font-size: clamp(46px, 2.9vw, 40px);
   }

   .plan {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(50px, 4.6vw, 60px) clamp(24px, 3.6vw, 48px);
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 60px rgba(4, 3, 26, 0.45);
   }

   .plan::after {
      border-radius: 30px;
   }

   .section,
   .footer {
      padding-left: 16px;
      padding-right: 16px;
   }

   .cta-box .btn {
      width: 100%;
   }

   .section,
   .footer {
      padding-top: 48px;
   }

   .header {
      height: 100px;
   }

   .header__inner {
      padding-left: 16px;
      padding-right: 16px;
   }

   .header--scrolled {
      height: 70px;
   }

   .page__top {
      padding-top: 70px;
   }

   .header__logo img {
      max-width: 176px;
   }

   .burger__icon {
      width: 24px;
      height: 24px;
   }

   .lang__toggle {
      font-size: 20px;
   }

   .h2,
   .h2--md,
   .h2--lg,
   .h2--xl {
      font-size: 36px;
   }

   .hero__form {
      flex-direction: column;
      gap: 12px;
      position: absolute;
      bottom: 110px;
      width: 100%;
   }

   .hero__form>* {
      width: 100%;
   }

   .hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 1300px;
      margin: 0 auto;
      min-height: calc(100vh - 78px);
      padding-bottom: 20vh;
   }

   .phones {
      zoom: 0.6;
      gap: 8px;
   }

   .channel {
      gap: 16px;
      padding: 14px 14px 18px;
      border-radius: 34px;
   }

   .whitelabel {
      width: 100%;
      min-height: 320px;
      aspect-ratio: 1 / 1;
   }

   .footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .chip {
      padding: 6px 10px;
      font-size: 10px;
   }

   .chip--brand {
      padding: 8px 15px;
      font-size: 11px;
   }

   .split,
   .split--wide,
   .split--narrow,
   .split--even,
   .split--duo,
   .split--head,
   .split--aside {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
   }

   .split--duo {
      margin-top: 30px;
   }

   .features {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 30px;
   }

   .feature {
      padding: clamp(34px, 4.4vw, 58px) clamp(24px, 2.6vw, 42px);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: background 0.4s ease, border-color 0.4s ease;
   }

   .panel--indigo .h2--xl {
      margin-top: 0;
   }
}

/* ── Result cards (Який результат) ───────────── */
.grid--3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(20px, 3vw, 40px);
}

.result-card {
   display: flex;
   flex-direction: column;
   gap: clamp(20px, 2.5vw, 32px);
}

.result-card__image {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(135deg, #0A0F2C 0%, #1A1F3A 100%);
}

.result-card__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.result-card__text {
   font-size: clamp(14px, 1.1vw, 16px);
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.85);
   text-align: center;
   margin: 0;
}

@media (max-width: 980px) {
   .grid--3 {
      grid-template-columns: 1fr;
      gap: 40px;
   }
}

/* ========================================
   Стили для страницы servis-mittyevih-vidgukiv.html
   ======================================== */

/* Переопределение стилей для планшета на этой странице */
.hero .tablet {
   max-width: 800px;
   margin: -26vh auto -213px;
}

.hero .tablet__item--center {
   width: 100%;
   max-width: 100%;
   height: auto;
   z-index: 2;
   margin: 0 auto;
}

.hero .tablet__item--center img {
   width: 100%;
   height: auto;
}

/* Отменяем nth-child стили для этой страницы */
.hero .tablet__item:nth-child(1) {
   width: 100%;
}

/* Блок "Як це працює?" */
.how-it-works {
   padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px);
   position: relative;
}

.how-it-works .deco {
   z-index: 0;
}

.how-it-works__title {
   text-align: center;
   margin-bottom: clamp(40px, 5vw, 70px);
   display: flex;
   align-items: center;
   gap: 16px;
   color: white;
   position: relative;
   z-index: 1;
}

.how-it-works__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   background: #FFD700;
   border-radius: 12px;
   flex-shrink: 0;
}

.how-it-works__cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(24px, 3vw, 40px);
   position: relative;
   z-index: 1;
}

.how-it-works__card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.how-it-works__image {
   border-radius: 24px;
   overflow: hidden;
   position: relative;
   width: 100%;
}

.how-it-works__image--glow-blue {
   box-shadow: 0 0 40px rgba(100, 149, 237, 0.4), 0 0 80px rgba(100, 149, 237, 0.2);
}

.how-it-works__image--glow-gold {
   box-shadow: 0 0 40px rgba(255, 215, 0, 0.4), 0 0 80px rgba(255, 215, 0, 0.2);
}

.how-it-works__image img {
   width: 100%;
   height: auto;
   display: block;
}

.how-it-works__text {
   color: white;
   font-size: clamp(16px, 1.2vw, 18px);
   line-height: 1.4;
}

/* Блок "Який результат ви отримаєте?" */
.results-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: clamp(12px, 1.5vw, 24px);
}

.results-card {
   background: rgb(10 14 39 / 10%);
   border: 1px solid rgba(52, 82, 255, 0.3);
   border-radius: 32px;
   padding: clamp(16px, 2vw, 40px);
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 0;
   align-items: center;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
}

.results-card::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 140px;
   background: linear-gradient(180deg, rgba(58, 38, 174, 0) 0%, rgb(66 40 219 / 40%) 100%);
   pointer-events: none;
}

.results-card__content {
   display: flex;
   flex-direction: column;
   gap: clamp(12px, 1.5vw, 20px);
}

.results-card__header {
   display: flex;
   align-items: center;
   gap: clamp(12px, 1.5vw, 16px);
}

.results-card__number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: clamp(36px, 4vw, 48px);
   height: clamp(36px, 4vw, 48px);
   background: rgba(52, 82, 255, 0.2);
   border: 1px solid rgba(52, 82, 255, 0.4);
   border-radius: 12px;
   color: white;
   font-size: clamp(14px, 1.6vw, 18px);
   font-weight: 700;
   flex-shrink: 0;
}

.results-card__title {
   color: white;
   font-size: clamp(18px, 2vw, 24px);
   font-weight: 700;
   line-height: 1.2;
   margin: 0;
}

.results-card__text {
   font-size: clamp(16px, 1.1vw, 16px);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.85);
   text-align: center;
   margin: 0;
}

.results-card__image {
   width: clamp(120px, 20vw, 255px);
   height: auto;
   flex-shrink: 0;
}

.results-card__image img {
   width: 100%;
   height: auto;
   display: block;
}

.smv_h2 {
   text-align: center;
   margin-bottom: clamp(40px, 5vw, 70px);
}

/* Медиа-запросы для servis-mittyevih-vidgukiv.html */
@media (max-width: 980px) {
   .hero .tablet {
      max-width: 800px;
      margin: -26vh auto -183px;
   }

   .how-it-works__cards {
      grid-template-columns: 1fr;
      gap: clamp(16px, 5vw, 50px);
   }

   .results-card {
      padding-top: 20px;
      padding-bottom: 20px;
      border-radius: 20px;
   }
}

@media (max-width: 790px) {
   .results-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: clamp(12px, 1.5vw, 24px);
   }
}

@media (max-width: 640px) {
   .hero .tablet {
      max-width: 100%;
      margin: -26vh auto -253px;
   }

   .how-it-works {
      padding: clamp(50px, 6vw, 80px) clamp(24px, 4vw, 60px);
   }

   .how-it-works__icon {
      width: 42px;
      height: 42px;
   }

   .how-it-works__cards {
      gap: clamp(14px, 3vw, 50px);
   }

   .smv_h2 {
      text-align: left;
      margin-bottom: clamp(24px, 5vw, 70px);
   }

   .results-card {
      border-radius: 20px;
      grid-template-columns: 1fr auto;
      grid-auto-flow: column;
      padding-right: 0;
      padding-left: 12px;
      text-align: left;
   }

   .results-card__title {
      font-size: clamp(16px, 2vw, 24px);
      text-align: left;
   }

   .results-card__text {
      text-align: left;
   }

   .results-card__image {
      margin: 0;
   }
}

@media (max-width: 480px) {
   .hero .tablet {
      max-width: 100%;
      margin: -26vh auto -173px;
   }
}

/* ═══════════════════════════════════════════════════════
   Стили для страницы blog.html
   ═══════════════════════════════════════════════════════ */

/* Hero для блога */
.hero--blog {
   position: relative;
   z-index: 5;
   text-align: center;
   padding-top: 30px;
}

.hero--blog .hero__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 100%;
   min-height: calc(36vh - 0px);
   margin-bottom: -6vh;
   align-items: flex-start;
   position: relative;
   padding: 0;
   gap: 20px;
}

.hero--blog .hero__title {
   margin: 0;
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(34px, 10.6vw, 100px);
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   text-wrap: balance;
   text-align: left;
}

.blog-hero__label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, 0.6);
   margin-bottom: 0;
}

.blog-hero__heading {
   position: relative;
   display: flex;
   align-items: center;
   gap: 20vw;
}

.blog-hero__deco {
   flex-shrink: 0;
   opacity: 0.8;
   width: 145px;
   height: auto;
}

/* Сетка статей */
.blog-articles {
   padding-top: 80px;
   padding-bottom: 80px;
}

.blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(20px, 2vw, 32px);
}

/* Карточка статьи */
.blog-card {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   transition: transform 0.3s ease, border-color 0.3s ease;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.blog-card:hover {
   transform: translateY(-4px);
   border-color: rgba(255, 255, 255, 0.15);
}

.blog-card__link-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
   text-decoration: none;
   color: inherit;
}

.blog-card__link-wrapper:hover {
   text-decoration: none;
}

.blog-card__visual {
   flex: 1;
   display: flex;
   padding: 20px;
   position: relative;
   background: linear-gradient(135deg, rgba(60, 60, 80, 0.3) 0%, rgba(40, 40, 60, 0.3) 100%);
   flex-direction: column;
   gap: 20px;
}

.blog-card__visual img {
   max-width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
}

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

.blog-card__info {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
}

.blog-card__date {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   display: block;
   white-space: nowrap;
}

.blog-card__title-wrapper {
   display: flex;
   height: 47px;
   overflow: hidden;
   align-items: center;
}

.blog-card__title {
   font-size: clamp(16px, 1.4vw, 18px);
   font-weight: 700;
   line-height: 1.3;
   color: #fff;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.blog-card__more {
   font-size: 14px;
   font-weight: 600;
   color: #FFD608;
   white-space: nowrap;
   transition: gap 0.3s ease;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.blog-card__more::after {
   content: '';
   display: inline-block;
   width: 9px;
   height: 9px;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 11C12 11.5523 11.5523 12 11 12C10.4477 12 10 11.5523 10 11V3.41406L1.70703 11.707C1.31651 12.0976 0.683493 12.0976 0.292969 11.707C-0.0975556 11.3165 -0.0975556 10.6835 0.292969 10.293L8.58594 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1V11Z' fill='%23FFDD00'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin-top: 3px;
}

.blog-card:hover .blog-card__more {
   gap: 10px;
}

/* Pagination */
.blog-pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-top: 60px;
}

.blog-pagination__link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   transition: all 0.3s ease;
   border: 1px solid transparent;
}

.blog-pagination__link:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   text-decoration: none;
}

.blog-pagination__link--active {
   background: #6366F1;
   color: #fff;
   border-color: rgba(99, 102, 241, 0.5);
}

.blog-pagination__arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   transition: all 0.3s ease;
}

.blog-pagination__arrow:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   border-color: rgba(255, 255, 255, 0.2);
}

/* Адаптив */
@media (max-width: 1200px) {
   .blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(20px, 2vw, 32px);
   }
}

@media (max-width: 980px) {
   .blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }

   .blog-hero__deco {
      right: -40px;
      width: 80px;
   }

   .blog-articles {
      padding-top: 60px;
      padding-bottom: 60px;
   }

}

@media (max-width: 640px) {
   .blog-grid {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .hero--blog .hero__content {
      margin-bottom: -6vh;
      gap: 16px;
      min-height: 170px;
   }

   .blog-hero__heading {
      gap: 0vh;
      width: 100%;
      justify-content: space-between;
   }

   .blog-articles {
      padding-top: 48px;
      padding-bottom: 48px;
   }

   .blog-pagination {
      margin-top: 40px;
      gap: 8px;
   }

   .blog-pagination__link,
   .blog-pagination__arrow {
      width: 40px;
      height: 40px;
      font-size: 14px;
   }
}

@media (max-width: 480px) {
   .blog-card__visual {
      padding: 12px 12px 20px;
   }
}

/* ═══════════════════════════════════════════════════════
   Стили для детальной страницы статьи blog-article.html
   ═══════════════════════════════════════════════════════ */

/* Модификатор для page__top на странице статьи */
.page__top--article {
   padding-bottom: 60px;
}

/* Контейнер для статьи */
.container--narrow {
   max-width: 1400px;
}

/* Секция детальной страницы блога */
.blog_detail.section {
   position: relative;
   padding: 0px 30px 0;
}

/* Хлебные крошки */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: clamp(32px, 5vw, 60px);
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   flex-direction: row;
}

.breadcrumbs__link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: rgb(255 255 255);
   text-decoration: none;
   transition: color 0.3s ease;
   font-weight: 500;
   letter-spacing: 0.5px;
}

.breadcrumbs__link:hover {
   color: #FFD608;
   text-decoration: none;
}

.breadcrumbs__link svg {
   flex-shrink: 0;
}

.breadcrumbs__separator {
   color: rgba(255, 255, 255, 0.3);
}

.breadcrumbs__current {
   color: rgb(255 255 255 / 54%);
   font-weight: 500;
   letter-spacing: 0.5px;
}

/* Заголовок статьи */
.article__header {
   margin-bottom: 48px;
   display: flex;
   gap: 100px;
}

.article__date {
   display: inline-block;
   font-size: 14px;
   color: rgb(255 255 255);
   margin-bottom: 20px;
   font-weight: 400;
   border: 1px solid #ffffff6e;
   padding: 10px 14px;
   border-radius: 30px;
   max-height: 40px;
}

.article__title {
   margin: 0;
   font-family: "Sofia Sans Extra Condensed", sans-serif;
   font-size: clamp(32px, 7vw, 90px);
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
   text-wrap: balance;
}

/* Основное изображение статьи */
.article__featured-image {
   margin-bottom: 48px;
   border-radius: 24px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.article__featured-image img {
   width: 100%;
   height: auto;
   display: block;
   position: relative;
}

/* Контент статьи */
.article__content {
   font-size: 18px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.85);
}

.article__content p {
   margin: 0 0 36px;
}

.article__content p:last-child {
   margin-bottom: 0;
}

.article__content a {
   color: #FFD608;
   text-decoration: none;
   transition: opacity 0.3s ease;
}

.article__content a:hover {
   opacity: 0.8;
}

/* Адаптив для статьи */
@media (max-width: 640px) {
   .page__top--article {
      padding-bottom: 40px;
   }

   .breadcrumbs {
      margin-bottom: 24px;
      font-size: 12px;
   }

   .breadcrumbs__current {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .article__header {
      margin-bottom: 32px;
      flex-direction: column;
      gap: 10px;
   }

   .article__date {
      font-size: 12px;
      margin-bottom: 8px;
      width: auto;
      padding: 6px 10px;
   }

   .article__featured-image {
      margin-bottom: 32px;
      border-radius: 16px;
   }

   .article__content {
      font-size: 16px;
   }

   .article__content p {
      margin-bottom: 30px;
   }

   .mobile-menu {
      padding-top: 90px;
   }

   .blog_detail.section {
      padding: 20px 16px 0;
   }
}