/* ==========================================================================
   Ringostat phone widget — float button positioning
   ========================================================================== */
.rngst_phone_button {
    right: 1em !important;
    bottom: 1em !important;
}

@media (max-width: 767px) {
    .rngst_phone_button {
        right: 0.5em !important;
        bottom: 0.5em !important;
    }
}

/* ==========================================================================
   intl-tel-input overrides
   ========================================================================== */
.intl-tel-input {
    display: block;
    margin-bottom: 1em;
}

.iti__country-list {
    z-index: 999999 !important;
    background: white !important;
}

.iti {
    width: 100% !important;
    display: block;
}

.iti.iti--container {
    z-index: 999999 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/*
.phone-input {
  width: 100%;
  padding: 0.5em;
  font-size: 1em;
}*/

/* ==========================================================================
   Header socials
   ========================================================================== */
.header-socials .social-icon {
    background-color: #000;
}

.header-socials .footer_main-info-socials-item-wrapper {
    justify-content: center;
}

.header-socials .social-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* ==========================================================================
   Business popup mobile
   ========================================================================== */
@media (max-width: 479px) {
    .business-popup__info__label .icon-66 {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: .5625rem;
    }
}

/* ==========================================================================
   Modal registration
   ========================================================================== */
.modal-reg {
    display: none !important;
}

.modal-reg.is--active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
    padding: 40px 20px !important;
    -webkit-overflow-scrolling: touch;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-reg-window {
    margin: auto !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}

/* ==========================================================================
   Global tokens & layout
   ========================================================================== */
:root {
    --global-shadow: box-shadow: 0 0 3.75rem 0 rgba(209, 237, 132, 0.30);
    --global-gradient: linear-gradient(93deg, #FFF766 -8.56%, #29C6FF 113.73%);
    --global-gradient-hov: linear-gradient(93deg, #FFFAA1 -8.56%, #6CD5FA 113.73%);
    --font-size-text: 16;
    --font-size-block: 16;
    --btn-gradient-hov: linear-gradient(82.4deg, rgba(255, 255, 255, 0) 29.96%, rgba(255, 255, 255, 0.55) 115.49%), #000000;;
}

html {
    font-size: calc(var(--font-size-block) / 1920 * 100vw);
}

body {
    font-size: calc(var(--font-size-text) / 1920 * 100vw);
}

@media (max-width: 480px) {
    html {
        font-size: 16px;
    }
}

.main > *:not(.section_success) {
    padding-left: 15.625rem;
    padding-right: 15.625rem;
}

/* Button */
[data-wf--button--variant="black"]:hover {
    background: var(--btn-gradient-hov);
    color: #ffffff;
}

/* TEXT */
.text-gradient {
    background: var(--global-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/*=== BASE STYLES WITH TRANSITIONS ===*/
.header-nav a, .phone_number {
    transition: opacity .3s linear;
}

[global-gradient] {
    background: var(--global-gradient);
}

[main-border] {
    border: 0.0625rem solid var(--stroke-10);
}

[border-radius="15"] {
    border-radius: 0.9375rem;
}

[opacity="75"] {
    opacity: 0.8;
}

[opacity="55"] {
    opacity: 0.7;
}

.align-top {
    align-items: flex-start;
}

svg path {
    transition: fill .3s ease;
}

.tabs-button:not([tab-is-active="true"]) {
    transition: background-color .3s ease;
}

[tab-is-active="true"] {
    background: #000 !important;
}

[tab-is-active="true"] .tabs-button-text {
    color: #fff;
}

[tab-is-active="true"] svg path {
    fill: url(#svg-bg);
}

.text-color-semidark {
    color: #25292C;
}

/*=== SWIPER ===*/
.success-sw-wrapper a[href="#"] {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.swiper-button-disabled {
    opacity: .5;
}

.swiper-btn.btn-right .icon-23 {
    transform: rotate(180deg);
}

.swiper-btn,
.swiper_button {
    transition: background .3s ease;
}

/*===BUSINESS===*/
.business_card .icon-20 {
    transition: transform .3s ease;
}

.business_card:hover .business_card-title {
    transition: color .3s ease;
}

.business_card.item-01,
.business_card.item-02,
.business_card.item-03,
.business_card.item-04 {
    transition: background .3s ease, box-shadow .3s ease;
}

[card-item-color="one"] {
    color: var(--card-item-one);
}

[card-item-bg="one"] {
    background-color: var(--card-item-one);
}

[card-item-color="two"] {
    color: var(--card-item-two);
}

[card-item-bg="two"] {
    background-color: var(--card-item-two);
}

[card-item-color="three"] {
    color: var(--card-item-three);
}

[card-item-bg="three"] {
    background-color: var(--card-item-three);
}

[card-item-color="four"] {
    color: var(--card-item-four);
}

[card-item-bg="four"] {
    background-color: var(--card-item-four);
}

[card-item-color="five"] {
    color: var(--card-item-five);
}

[card-item-bg="five"] {
    background-color: var(--card-item-five);
}

[card-item-color="six"] {
    color: var(--card-item-six);
}

[card-item-bg="six"] {
    background-color: var(--card-item-six);
}

/*=== FEATURES ===*/
.features-wrapper .vert_divider {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

svg rect {
    transition: all .3s ease;
}

.rect-bg {
    transition: all .3s ease;
}

/*=== FAQ ===*/
.accordion-item {
    transition: background-color .3s ease, border .3s ease;
}

[accordion-is-active="true"] .vertical {
    fill: none;
}

[accordion-is-active="false"] .accordion-item-answer-text {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
}

[accordion-is-active="true"] .accordion-item-answer-text {
    transform: translateY(0px) scale(1);
    opacity: 1;
}

/* active state */
[accordion-is-active="true"] .accordion-item-answer {
    max-height: 50rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

[accordion-is-active="true"] {
    border: solid 0.0625rem var(--stroke-10);
    background-color: #fff;
}

[accordion-is-active="true"] .accordion-item-question-wrapper {
    border-bottom: solid 0.0625rem var(--stroke-10);
}

/*PLAN CARDS*/
.plans-card-info-item:first-child {
    padding-top: 0rem;
}

.plans-card-info-item:last-child {
    border-bottom: none;
}

[is-favorite="false"] .plans-card-label-item.is-fav {
    display: none;
}

[is-discount="false"] .plans-card-price-label {
    visibility: hidden;
}

[per-month="false"] .plans-card-price-per_month {
    visibility: hidden;
}

.plans-card-container.is-active .plans-card-btn > * {
    color: #000;
}

/*FEATURES TABLE*/
.features_table .row .row-item:first-child {
    width: 20.625rem;
    justify-content: flex-start;
    text-align: left;
}

.row {
    border: solid 0.0625rem transparent;
}

.row:not(:first-child):nth-child(odd) {
    background: #fff;
    border-radius: 1rem;
    border: solid 0.0625rem var(--stroke-10);
}

.row:first-child {
    border-bottom: solid 0.0625rem var(--stroke-10);
}

.row-item p {
    font-size: 1em;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.row-item:nth-child(4) {
    background-color: #E7B81C1A;
}

.row-item:last-child {
    border-right: none;
}

.row-item {
    order: 2;
}

.row-item:first-child {
    order: 1;
}

[data-mobile-vs-dd-list="true"] {
    display: flex;
}

[plan-details-table="true"] {
    display: block;
}

[plan-details-table="false"] {
    display: none;
}

[plan-more-details="false"] .icon-20.plans-buttom_more-icon {
    transform: rotateZ(180deg);
}

[plan-more-details="true"] .icon-20.plans-buttom_more-icon {
    transform: rotateZ(0deg);
}

/*=== SOCIALS ICON ===*/
.social-icon {
    transition: transform .3s ease, background .3s ease;
}

.social-icon #path {
    transition: fill .3s ease;
}

/**=== Modal ===*/
.divider-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 2.813rem;
}

.divider-line {
    height: 1px;
    min-height: 1px;
    background-color: #00000040;
    flex-grow: 1;
    border: none;
}

.divider-text {
    color: #00000040;
    font-size: 1rem;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    text-transform: lowercase;
}

/**=== FORM ===*/
.form-item__input {
    border: none;
    border-bottom: solid 2px var(--stroke-10);
}

/**=== TABS VISIBILITY SWITCH ===*/
/**=== HIDE SCROLLBARS ===*/
/* Chrome, Safari, Edge */
.plans-wrapper,
.gap-15_horizontal.tab-container_plan,
.functionality-block-container {
    -webkit-overflow-scrolling: touch;
}

.plans-wrapper::-webkit-scrollbar,
.gap-15_horizontal.tab-container_plan::-webkit-scrollbar,
.functionality-block-container::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.plans-wrapper,
.gap-15_horizontal.tab-container_plan,
.functionality-block-container {
    scrollbar-width: none;
}

/* IE / old Edge */
.plans-wrapper,
.gap-15_horizontal.tab-container_plan,
.functionality-block-container {
    -ms-overflow-style: none;
}

/**=== TABS DISCOUNT STATE ===*/
.tabs-container[tab-container-is-active="false"] {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.tabs-container[tab-container-is-active="true"] {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.is-border-gradient {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #cfff5e, #4fd3ff) border-box;
}

/**=== SELECTOR ITEM ===*/
.selector-list_item:last-child {
    border-bottom: none;
}

/*============================================*/
/*=== HOVER EFFECTS FOR DESKTOP DEVICES ===*/
/*============================================*/
@media (hover: hover) {
    /*=== HEADER & NAVIGATION ===*/
    .header-nav a:hover,
    .phone_number:hover {
        opacity: 0.55;
    }

    /*=== GRADIENT EFFECTS ===*/
    [second-gradient]:hover {
        background: linear-gradient(93deg, rgba(255, 247, 102, 0.15) -8.56%, rgba(41, 198, 255, 0.15) 113.73%);
    }

    [global-gradient]:hover {
        background: var(--global-gradient-hov);
    }

    /*=== TABS ===*/
    .tabs-button:not([tab-is-active="true"]):hover {
        background-color: rgba(242, 242, 242, 0.25);
    }

    .tabs-button:hover svg path {
        fill: url(#svg-bg);
    }

    /*=== SWIPER BUTTONS ===*/
    .swiper-btn:hover {
        background: linear-gradient(52deg, rgba(255, 255, 255, 0.00) 27.09%, rgba(255, 255, 255, 0.55) 129.23%), #000;
    }

    .swiper_button:hover {
        background: linear-gradient(82deg, rgba(255, 255, 255, 0.00) 29.96%, rgba(255, 255, 255, 0.55) 115.49%), #000;
    }

    /*=== BUSINESS CARDS ===*/
    .business_card:hover .business_card-title {
        color: #fff;
    }

    .business_card:hover .icon-20 {
        transform: translateX(50%);
    }

    .business_card.item-01:hover {
        background: linear-gradient(65.24deg, rgba(255, 57, 126, 0) 29.5%, rgba(255, 57, 126, 0.65) 152.73%), #000000;
        box-shadow: -0.4375rem 0.25rem 5.625rem rgba(232, 27, 99, 0.1);
    }

    .business_card.item-02:hover {
        background: linear-gradient(65.24deg, rgba(55, 169, 174, 0) 29.5%, rgba(55, 169, 174, 0.65) 152.73%), #000000;
        box-shadow: -0.4375rem 0.25rem 5.625rem rgba(232, 27, 99, 0.1);
    }

    .business_card.item-03:hover {
        background: linear-gradient(65.24deg, rgba(133, 194, 5, 0) 29.5%, rgba(133, 194, 5, 0.65) 152.73%), #000000;
        box-shadow: -0.4375rem 0.25rem 5.625rem rgba(232, 27, 99, 0.1);
    }

    .business_card.item-04:hover {
        background: linear-gradient(65.24deg, rgba(255, 181, 24, 0) 29.5%, rgba(255, 181, 24, 0.65) 152.73%), #000000;
        box-shadow: -0.4375rem 0.25rem 5.625rem rgba(232, 27, 99, 0.1);
    }

    /*=== FAQ ACCORDION ===*/
    .accordion-item:hover {
        background-color: #fff;
        border: solid 0.0625rem var(--stroke-10);
    }

    /* [accordion-is-active]:not([accordion-is-active="true"]):hover :is(.vertical, .horizontal) {
fill: #fff;
}
[accordion-is-active]:not([accordion-is-active="true"]):hover .rect-bg {
fill: url(#accordion-bg);
} */
    /*=== SOCIAL ICONS ===*/
    .social-icon:hover #path {
        fill: #fff;
    }

    .social-icon:hover {
        transform: translateY(-5%);
    }

    .social-icon.is-viber:hover {
        background: #8b4cc1;
    }

    .social-icon.is-tg:hover {
        background: #23A0DC;
    }

    .social-icon.is-faceboock:hover {
        background: #0066FF;
    }

    .social-icon.is-ig:hover {
        background: radial-gradient(41.61% 21.67% at 0% 41.2%, #D300C5 0%, rgba(211, 0, 197, 0) 100%), radial-gradient(62.11% 34.65% at 94.2% 7.25%, #D300C5 0%, rgba(211, 0, 197, 0) 100%), radial-gradient(18.32% 26.5% at 102.07% 89.96%, rgba(211, 0, 197, 0.7) 0%, rgba(211, 0, 197, 0) 100%), radial-gradient(68.46% 43.06% at 24.22% 97.93%, #FFD702 0%, rgba(255, 215, 2, 0) 100%), radial-gradient(89.25% 42.03% at 15.32% 3.11%, #7837F9 0%, rgba(120, 55, 249, 0.9) 27.76%, rgba(120, 55, 249, 0) 100%), linear-gradient(180.08deg, #FE02B7 26.95%, #FC2278 45.64%, #FF2160 60.95%, #FF5234 99.93%);
    }
}

/*============================================*/
/*=== RESPONSIVE MOBILE STYLES ===*/
/*============================================*/
@media (max-width: 479px) {
    :root {
        --font-size-text: 16;
        --font-size-block: 16;
    }

    html {
        font-size: calc(var(--font-size-block) / 375 * 100vw);
    }

    body {
        font-size: calc(var(--font-size-text) / 375 * 100vw);
    }

    .main > *:not(.section_success) {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .row-item:nth-child(4) {
        order: 3;
        border-left: none;
        border-right: none;
    }

    .row-item:last-child {
        border-right: .0625rem solid var(--stroke-10);
    }

    /*FEATURES TABLE*/
    .features_table .row .row-item:first-child {
        width: calc(100% / 3);
    }

    .row-item p {
        font-size: .75em;
    }

    .row:not(:first-child):nth-child(odd) {
        border-radius: .5rem;
    }

    [selector-arrow="active"] {
        transform: rotate(180deg);
    }
}

/* ==========================================================================
   Burger button
   ========================================================================== */
.burger-btn.is--active .line-two {
    opacity: 0;
}

.burger-btn.is--active .line-one {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) rotate(45deg);
}

.burger-btn.is--active .line-three {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   Lang dropdown
   ========================================================================== */
.dropdown_list_lang {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;
    pointer-events: none;
}

.dropdown_list_lang.w--open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang_icon {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.w--open .lang_icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   Header animation (commented placeholders)
   ========================================================================== */
/* Header Animation */
/* .header-logo,
.phone_number,
.header-nav-list > *,
.header-more > * {
  opacity: 0;
  transform: scale(0.85);
} */
/* Random Appear - дочерние элементы */
/* [random-appear] > * {
  opacity: 0;
  transform: scale(0.65);
}
[children-horizontal-jiggle] > * {
  transform: translateX(0);
} */
/* Horizontal Appear Magnetic */
/* [horizontal-appear-magnetic] > * {
  opacity: 0;
  transform: translateX(200%);
} */
/* Horizontal Appear Children */
/* [horizontal-appear-children] > * {
  opacity: 0;
  transform: translateY(25%);
} */
/* Vertical Appear */
/* [vertical-appear] {
  opacity: 0;
  transform: translateY(25%);
} */
/* Vertical Appear Children */
/* [vertical-appear-children] > * {
  opacity: 0;
  transform: translateY(25%);
} */

/* ==========================================================================
   Reset native <button> styles when used as a card CTA
   ========================================================================== */
button.business_card-link {
    background: none;
    border: 0;
    padding: 0;
    margin-top: auto;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* ==========================================================================
   Features title — staggered word reveal + gradient highlight + shimmer
   ========================================================================== */
.features-title__line {
    display: block;
}

.features-title__word {
    display: inline-block;
    margin-right: .25em;
    will-change: transform, opacity;
}

.features-title__line:nth-child(2) {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: .25em;
    row-gap: .15em;
}

.features-title__line:nth-child(2) .features-title__word {
    margin-right: 0;
}

.features-title__icon {
    margin: 0 .25em;
    will-change: transform, opacity;
}

.features-title__highlight {
    background-image: linear-gradient(93deg,
        #29C6FF 0%,
        #FFF766 25%,
        #29C6FF 50%,
        #FFF766 75%,
        #29C6FF 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.features-title.is-revealed .features-title__highlight {
    animation: features-shimmer 2.5s ease-in-out 0.6s 1 forwards;
}

@keyframes features-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .features-title.is-revealed .features-title__highlight {
        animation: none;
        background-position: 0 0;
    }
}

/* ==========================================================================
   Hero tabs — intro caption above the tab row
   ========================================================================== */
.tabs-intro {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1rem;
    opacity: 0.7;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Hero tabs — short attention hint on inactive tabs after page load
   ========================================================================== */
@keyframes tabs-hint-wobble {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-3px);
    }
    40% {
        transform: translateX(3px);
    }
    60% {
        transform: translateX(-2px);
    }
    80% {
        transform: translateX(2px);
    }
}

.tabs_wrapper.is-hint .tabs-button[tab-is-active="false"] {
    animation: tabs-hint-wobble 0.7s ease-in-out 1.2s 2;
}

@media (prefers-reduced-motion: reduce) {
    .tabs_wrapper.is-hint .tabs-button[tab-is-active="false"] {
        animation: none;
    }
}

/* ==========================================================================
   Functionality cards layout
   • desktop ≥992px — grid (Swiper destroyed in JS)
   • tablet/mobile ≤991px — coverflow swiper like success-swiper
   ========================================================================== */
@media (max-width: 991px) {
    .functionality-block-container.functionality-swiper {
        flex-flow: row nowrap;
        padding-bottom: 0;
    }

    .functionality-swiper .functionality-card.swiper-slide {
        width: 50%;
        max-width: 50%;
    }

    .functionality-block .functionality-nav {
        margin-bottom: 4.375rem;
    }
}

@media (max-width: 479px) {
    .functionality-swiper .functionality-card.swiper-slide {
        width: 100%;
        max-width: 100%;
    }

    .functionality-block .functionality-nav {
        margin-bottom: 1rem;
    }
}

/* On desktop cards lay out as a 3-column CSS grid.
   .swiper-wrapper is display:contents so its children become grid items. */
@media (min-width: 992px) {
    .functionality-block-container.functionality-swiper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .9375rem;
        overflow: visible;
    }

    .functionality-swiper > .swiper-wrapper {
        display: contents;
    }

    .functionality-swiper .functionality-card.swiper-slide {
        width: auto;
        max-width: none;
        transform: none !important;
        opacity: 1 !important;
    }

    .functionality-block .functionality-nav {
        display: none;
    }

    .functionality-block .plans-banner.is-funtionality {
        margin-top: 4.375rem;
    }
}

/* ==========================================================================
   Calculator tabs
   ========================================================================== */
.calc_tabs-list {
    box-shadow: 0px 0px 1.875em 0px rgba(232, 27, 99, 0.07);
}

/* no-icon tabs */
.tab.no-icon-13:hover {
    color: #ffffff;
}

.tab.no-icon-13:hover .tab_bg {
    opacity: 1;
    background: linear-gradient(82.4deg, rgba(255, 255, 255, 0) 29.96%, rgba(255, 255, 255, 0.55) 115.49%), #000000;
}

.tab.no-icon-13.is--active {
    color: #ffffff;
}

.tab.no-icon-13.is--active .tab_bg {
    opacity: 1;
    background: #000000;
}

/* with-sale tabs */
.tab.with-sale:hover {
    color: #ffffff;
}

.tab.with-sale:hover .tab_bg {
    opacity: 1;
    background: linear-gradient(82.4deg, rgba(255, 255, 255, 0) 29.96%, rgba(255, 255, 255, 0.55) 115.49%), #000000;
}

.tab.with-sale.is--active {
    color: #ffffff;
}

.tab.with-sale.is--active .tab_bg {
    opacity: 1;
    background: #000000;
}

/* ==========================================================================
   Reduce spacing before "Наші послуги" and "Наші інтеграції" sections
   ========================================================================== */
.section_solutions,
.section_integer {
    margin-top: -5.75rem;
}

@media (max-width: 479px) {
    .section_solutions,
    .section_integer {
        margin-top: -2rem;
    }
}