@font-face {
    font-family: 'Tektur';
    src: local('Tektur Regular'), local('Tektur-Regular'),
    url('/assets/fonts/Tektur-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur Medium'), local('Tektur-Medium'),
    url('/assets/fonts/Tektur-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur SemiBold'), local('Tektur-SemiBold'),
    url('/assets/fonts/Tektur-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur Bold'), local('Tektur-Bold'),
    url('/assets/fonts/Tektur-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur ExtraBold'), local('Tektur-ExtraBold'),
    url('/assets/fonts/Tektur-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

:root {
    --font-family: "Tektur", sans-serif;
    --primary: #65aef8;
    --0b2209: #091622;
    --0c1528: #0b1926;
    --131d31: #132231;
    --2d3b56: #2d4156;
    --7f9ba8: #7f94a8;
    --ecfbfe: #ecf5fe;
}

* {
    padding: 0;
    margin: 0;

}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--0c1528);
    font-family: 'Tektur', sans-serif;
}

a {
    text-decoration: none;
}

[class*="__container"] {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

.btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    padding: 9px 18px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--0c1528);
    background: var(--primary);
    height: 48px;
    cursor: pointer;
    outline: none;
    border: none;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.btn svg path,
.btn svg circle {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.header_nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    margin-left: auto;
}

.header_nav_item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.header_nav_item svg path,
.header_nav_item svg circle {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

header {
    position: relative;
}

.menu-triger, .menu-close {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 25px;
    height: 17px;
    position: relative;
    top: 15px;

}

.menu-triger span {
    width: 25px;
    height: 4px;
    background: var(--primary);
}

.menu-close {
    z-index: 100;
    position: absolute;
    right: 20px;
    top: 20px;
}

.menu-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 4px;
    background: var(--primary);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.menu-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-popup {
    display: none;
    background: #0b1926;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0;
    box-sizing: border-box;
    padding: 30px;
    z-index: 9999;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.menu-popup ul {
    margin: 0;
    padding: 0;
}

.menu-popup li {
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.body_pointer * {
    cursor: pointer;
}

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

.header_nav_item:nth-child(1):hover svg path, .header_nav_item:nth-child(2):hover svg path {
    fill: var(--primary);
}

.header_nav_item:nth-child(3):hover svg circle, .header_nav_item:nth-child(3):hover svg path {
    fill: transparent;
    stroke: var(--primary);
}

.header_nav_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--7f9ba8);
    transition: color 0.3s ease-in-out;
}

.btn:hover {
    background: rgba(101, 174, 248, 0.1);
    color: var(--primary);
}

.btn:hover svg {
    transition: all 0.3s ease-in-out;
}

.btn:hover svg path {
    stroke: var(--primary);
}

.main {
    overflow: hidden;
    position: relative;
}

.main__container {
    padding-top: 40px;
    padding-bottom: 40px;
    grid-template-areas:
        "left right"
        "description description"
        "features features";
    gap: 40px;
}

.main-left {
    max-width: 650px;
}

.main-right-title {
    margin-top: 20px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.main-right-form {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.option-input[type="radio"] {
    display: none; /* Hide the actual radio button */
}
.main-right-payment-systems {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.main-right-fetatures {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-right-fetatures-content {
    display: flex;
    gap: 20px;
}

.main-right-fetatures-content-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-right-fetatures-content-left-block {
    cursor: pointer;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    border: 2px solid var(--131d31);
}

.main-right-fetatures-content-left-block.active {
    background: var(--131d31);
}

.main-right-fetatures-content-left-block.active
.main-right-fetatures-content-left-block-title {
    color: var(--ecfbfe);
}
.main-right-fetatures-content-left-block.active
.main-right-fetatures-content-left-block-image {
    color: #65acf8;
}

.main-right-fetatures-content-left-block-image {
    color: #7f94a8;
}

.main-right-fetatures-content-right h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    margin-bottom: 16px;
}

.main-right-fetatures-content-right p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.main-right-fetatures-content-left-block-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.main-right-fetatures-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

@media (max-width: 768px) {
    .header_nav {
        display: none;
    }

    .main__container {
        padding: 0px 15px;
        flex-direction: column;

        margin-bottom: 60px;
    }

    .menu-triger {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 25px;
        height: 17px;
        cursor: pointer;
    }

    .menu-triger span {
        width: 25px;
        height: 4px;
        background: var(--primary);
    }

    .menu-popup {
        display: none;
    }

    .menu-popup.active {
        display: block;
    }

    .header__container {
        flex-direction: column;
        align-items: center;
    }

    .header_nav_item {
        display: block;
        width: 100%;
        text-align: center;
    }

    .header_nav_item_name {
        font-size: 14px;
    }

    .menu-close {
        display: flex;
    }

    .menu-close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25px;
        height: 4px;
        background: var(--primary);
        transform-origin: center;
        transition: transform 0.3s ease;
    }
}

@media (max-width: 480px) {
    .main_title {
        font-size: 80px;
    }
}


.advantages {
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 750px;
    padding: 90px 15px;
}

.advantage {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 480px;
}

.advantage:nth-child(2) {
    justify-content: flex-start;
}

.advantage:nth-child(3) {
    margin: 100px auto;
}

.advantage:nth-child(4) {
    margin-left: auto;
}

.advantage_title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.advantage_content {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
}

.advantage:nth-child(2) .advantage_content {
    text-align: center;
}

.advantage:nth-child(3) .advantage_content {
    text-align: right;
}

.products {
    display: flex;
    gap: 40px;
}

.products_images {
    display: flex;
    gap: 20px;
}

.products_images_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.products_image_left {
    border-radius: 6px;
    padding: 3px;
    max-height: 60px;
}

.products_image_left.active {
    border: 2px solid var(--primary);
    border-radius: 6px;
}

.products_image_left img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

.products_buys {
    width: 100%;
    height: 100%;
    max-width: 750px;
}

.product_buy_header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.product_buy_header img {
    width: 93px;
    height: 20px;
}

.product_buy_period {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
    cursor: pointer;
}

.product_buy_period_item {
    display: flex;
    align-items: center;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease-in-out;
}

.product_buy_period_item:hover {
    background: var(--131d31);
}

.product_buy_period_item-left svg {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.product_buy_period_item.active svg.inactive-svg {
    transform: scale(0.7);
    opacity: 0;
}

.product_buy_period_item.active svg.active-svg {
    transform: scale(1);
    opacity: 1;
}

.product_buy_period_item:not(.active) svg.active-svg {
    transform: scale(0.7);
    opacity: 0;
}

.product_buy_period_item:not(.active) svg.inactive-svg {
    transform: scale(1);
    opacity: 1;
}

.product_buy_period_item.active {
    background: var(--131d31);
}

.product_buy_period_item-left {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.products_image_main {
    max-width: 850px;
}

.products_image_main img {
    max-width: 850px;
    width: 100%;
    max-height: 450px;
    height: 100%;
}

.product_buy_period_item-price {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
    margin-left: auto;
}

.product_buy_btn {
    margin-top: 40px;
    justify-content: center;
}

.product_buy_provider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_system {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.product_buy_system_header {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.product_buy_system_requirements {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

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

.product_buy_system_item_name {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_system_item_value {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.product_buy_description, .product_buy_option {
    margin-top: 40px;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.product_buy_description {
    grid-area: description;
}

.product_buy_option {
    grid-area: features;
}


.product_buy_description_title, .product_buy_option_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.product_buy_description_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_option_content {
    display: flex;
    gap: 20px;
}

.product_buy_option_select {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_buy_option_select_item {
    display: flex;
    gap: 15px;
    align-items: center;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    padding: 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 200px;
    cursor: pointer;
}

.product_buy_option_select_item.active {
    color: var(--ecfbfe);
    background: var(--131d31);
}

.product_buy_option_select_item.active svg path{
    fill: var(--primary);
}

.product_buy_option_desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product_buy_option_desc_title {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.product_buy_option_desc_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_option_desc_text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}





.order_content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 0;
}

.order_detail {
    width: 100%;
    max-width: 700px;
}

.order_detail_title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.order_detail_contact {
    padding: 24px;
    background: var(--0b2209);
    border-radius: 8px;
}

.order_detail_contact_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
    margin-bottom: 12px;
}

.order_detail_contact_desc {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    margin-bottom: 24px;
}

.order_detail_contact_input {
    font-family: var(--font-family);
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    width: 100%;
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    outline: none;
}

.payments_methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    width: 100%;
}

.payments_method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.payments_method.active {
    background: var(--131d31);
}

.payment_method_info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.payment_method_other {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
}



.order_push {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.order_image, .order_image img {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 280px;
}

.invoice_detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--0b2209);
    border-radius: 8px;
    padding: 24px;
}

.invoice_detail_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.invoice_detail_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.invoice_detail_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 100%;
}

.invoice_detail_item_value {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    width: 100%;
}

.invoice_pay {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--0b2209);
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}

.invoice_pay_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.invoice_pay_status {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: right;
    color: #f89b65;
    padding: 8px;
    background: rgba(248, 155, 101, 0.2);
    border-radius: 8px
}

.invoice_pay_desc {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.invoice_pay_detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.invoice_pay_detail_item {
    display: flex;
    align-items: center;
    width: 100%;
}

.invoice_pay_detail_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 100%;
}

.invoice_pay_detail_item_val_wr {
    width: 100%;
}

.invoice_pay_detail_item_value {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: right;
    color: var(--primary);
    background: rgba(101, 174, 248, 0.2);
    border-radius: 8px;
    padding: 8px;
    text-wrap: nowrap;
    width: min-content;
}

.invoice_warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(248, 101, 101, 0.2);
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #f86565;
    border-radius: 8px;
}

.btn.custom {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--primary);
    background: rgba(101, 174, 248, 0.1);
    border-radius: 6px;
}

.panel_container {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.panel_title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.panel_detail {
    padding: 24px;
    border-radius: 8px;
    background: var(--0b2209);
}

.panel_detail_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

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

.panel_detail_user_desc {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_detail_user_mail {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.panel_table {
    width: 100%;
    margin-top: 24px;
}

.panel_table_head {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    padding: 16px;
    background: var(--0c1528);
}

.panel_table_head_item {
    width: 100%;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_table_body {
    width: 100%;
}

.panel_table_body_items {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px;
    gap: 12px;
}

@media (max-width: 768px) {
    .payments_methods {
        flex-direction: column !important;
    }

    .payments_method {
        width: 100% !important;
        margin-bottom: 10px;
    }
}


.panel_table_body_item {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.panel_table_body_item:nth-child(1) {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_table_head_item:nth-child(3), .panel_table_body_item:nth-child(3) {
    width: 50%;
}

.panel_table_head_item:nth-child(2), .panel_table_head_item:nth-child(4) {
    width: 120%;
}

.panel_table_body_item:nth-child(2), .panel_table_body_item:nth-child(4) {
    width: 130%;
}

/* START HERE */

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 36px;
    background: var(--0c1528);
    width: 100%;
    max-width: 430px;
    z-index: 9999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal_content {
    position: relative;
    z-index: 99;
    margin-bottom: 36px;
}

.modal_content_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.modal_content_notify {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
    border-radius: 8px;
    padding: 16px;
    background: rgba(101, 174, 248, 0.2);
    margin-bottom: 24px;
}

.modal_content_input_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal_content_input_label {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.modal_content_input {
    font-family: var(--font-family);
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    background: transparent;
    outline: none;
}

.modal_content_error {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 16px;
    background: rgba(248, 101, 101, 0.2);
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #f86565;
    margin-top: 12px;
}

.modal_backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: .2s all ease;
}

.modal_backdrop.active {
    opacity: .7;
    visibility: visible;
}

.modal_decor {
    position: absolute;
    top: 5px;
    left: -18px;
}

.modal_content_inputs_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.modal_content_input_wr {
    width: 100%;
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    outline: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.modal_btn {
    position: relative;
    z-index: 99;
}

/* STA2 */



/* STA2 */

.modal_close {
    cursor: pointer;
    transform: rotate(45deg);
}

.products_top {
    display: flex;
    gap: 40px;
}

.products {
    background-color: #091622;

    display: flex;
    flex-direction: column;
    gap: 40px;
}


.products_images {
    grid-area: gallery;
}

.products_buys {
    grid-area: buy;
}

.product_buy_description {
    grid-area: description;
}

.product_buy_option {
    grid-area: features;
}


.products__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 380px);
    grid-gap: 30px;
    justify-items: center;  /* Центрирует элементы внутри grid */
    position: relative;  /* Добавляет контекст для абсолютного позиционирования */
}

.products_image {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
    z-index: 1;
}

.products_image:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(101, 172, 248, 0.2);
}

.products-decor-1 {
    position: absolute;
    bottom: 357px;
    left: -230px;
}

.products-decor-2 {
    position: absolute;
    bottom: 357px;
    left: 280px;
    opacity: 0.2;
}


.main {
    overflow: hidden;
    position: relative;
}

.products-decor-3 {
    position: absolute;
    right: -530px;
    top: -240px;
}

.map {
    position: relative;
    background-color: #0b1926;
}

.map_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map_content-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.map_content-title-text {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.map_content-subtext {
    max-width: 485px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
}

#select {
    padding-top: 100px;
}

#pay {
    padding-top: 80px;
    padding-left: 386px;
}

#pay .map_content-subtext {
    text-align: center;
    max-width: 465px;
}

#recive {
    padding-top: 93px;
    padding-left: 733px;
    padding-bottom: 113px;
}

#recive .map_content-subtext {
    text-align: end;
    max-width: 447px;
}

.map-decor {
    position: absolute;
    left: -112px;
}

.map-dot-decor-1 {
    position: absolute;
    left: -380px;
    bottom: 0;
}

.map-dot-decor-2 {
    position: absolute;
    right: 260px;
    bottom: -30px;
    opacity: 0.2;
}

.map-dot-decor-3 {
    position: absolute;
    right: 0px;
    bottom: -30px;
    opacity: 0.2;
}


.main-left {
    max-width: 650px;
}

.splide__slide-img {
    border-radius: 6px;
}

#thumbnail-slider .splide__slide.is-active {
    border: 2px solid #65acf8;
}

#thumbnail-slider .splide__slide {
    border-radius: 10px;
}

#main-slider .splide__slide {
    border-radius: 6px;
}

#main-slider {
    max-width: 850px;
}

.splide__slide-img {
    width: 650px;
    height: 380px;
    height: auto;
    object-fit: cover;
}

#thumbnail-slider {
    margin-top: 20px;
}

.description {
    margin: 40px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.description-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.description-subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.system {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.system-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}








/* STA */
.advantage_mob_head {
    display: none;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 65px;
}

.advantage_head_title {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ecfbfe);
}

.advantage_head_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
    text-align: center;
}

.panel_container_mob {
    display: none;
}

.panel_headmob {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.panel_items_mob {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 36px;
}

.panel_item_mob {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 8px;
    padding: 24px;
    background: var(--0b2209);
}

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

.panel_item_date {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_item_name {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.panel_item_duration, .panel_item_key {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.copy_key {
    width: 100%;
    border-radius: 6px;
    padding: 9px 18px;
    background: rgba(101, 174, 248, 0.1);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--primary);
}

.menu {
    display: none;
}

#mainImage {
    position: relative;
}

.main_image {
    position: relative;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #65AEF8;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
}

.left-arrow {
    left: -15px;
}

.right-arrow {
    right: -15px;
}

.modal_close {
    cursor: pointer;
    transform: rotate(45deg);
}

@media screen and (max-width: 1280px) {
    .map {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    #select,
    #pay,
    #recive {
        padding: 0;
    }
    #pay .map_content-subtext {
        text-align: start;
        max-width: 485px;
    }
    #recive .map_content-subtext {
        text-align: start;
        max-width: 485px;
    }
    .map__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        padding: 0px 15px;
    }
    .map-dot-decor-2 {
        bottom: -120px;
    }
}

@media screen and (max-width: 480px) {
    .menu {
        display: block;
    }
    .advantage_mob_head {
        display: block;
    }
    .header_nav_item {
        display: none;
    }
    .main_title {
        font-size: 48px;
    }

    .main_content {
        justify-content: flex-start;
        gap: 15px;
        margin-top: 75px;
    }
    .advantages {
        background-image: url(/assets/images/background_mob.png);
    }
    .advantage {
        width: 100%;
        max-width: 350px;
        margin: 64px auto;
    }
    .advantage:nth-child(2) {
        margin: 0 auto;
    }
    .advantage_title {
        font-size: 24px;
    }
    .advantage:nth-child(2) .advantage_content, .advantage:nth-child(3) .advantage_content{
        text-align: left;
    }
    .products {
        flex-direction: column;
    }
    .products_images {
        flex-direction: column;
    }
    .products_image_main, .products_image_main img {
        width: 100%;
    }
    .products_images_left {
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .products {
        padding: 64px 32px;
    }
    .product_buy_header {
        font-size: 24px;
    }
    .product_buy_option_content {
        flex-direction: column;
    }
    .product_buy_option_select {
        flex-direction: row;
    }
    .product_buy_option_select_item {
        justify-content: center;
    }
    .product_buy_option_select_item div {
        display: none;
    }
    .order_content {
        padding: 64px 32px;
        flex-direction: column;
    }
    .order_detail_title {
        font-size: 24px;
    }
    .order_detail_contact {
        background: transparent;
        padding: 0;
    }
    .payment_method_other {
        display: none;
    }
    .payments_methods {
        flex-direction: row;
        overflow: auto;
    }
    .payment_method_info {
        flex-direction: column;
        text-wrap: nowrap;
    }
    .invoice_detail_item {
        gap: 40px;
    }
    .invoice_pay_detail_item {
        flex-direction: column;
    }
    .btn.custom {
        padding: 18px;
        height: 100%;
    }
    .panel_container {
        display: none;
    }
    .panel_container_mob {
        display: block;
        padding: 64px 32px;
    }
}

.header_nav_item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

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

.lang_input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.lang_input[type="radio"]:checked + label {
    color: #ffffff;
    border: 2px solid #65acf8;
}

.language {
    background-color: #132231;
    border-radius: 6px;
    color: #7f94a8;
    padding: 7px 10px;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--7f9ba8);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* При наведении на метки */
.language:hover {
    background-color: #65acf8;
    color: white;
}

/* Медиазапросы для мобильной версии */
@media (max-width: 768px) {
    .language {
        font-size: 14px;
        padding: 6px 8px;
    }
}

.main-left {
    grid-area: left;
}

.products_buys {
    grid-area: right;
}


/* ===== FIX: System requirements (сжать + поднять выше описания) ===== */

/* заставляем блоки внутри .products_image_main идти строго сверху вниз */
.products_image_main{
    display: flex;
    flex-direction: column;
}

/* фикс порядка (если где-то было column-reverse / order и т.п.) */
.products_image_main .product_buy_system{ order: 2; }
.products_image_main .product_buy_description{ order: 3; }

/* если хочешь прям "повыше" (чуть ближе к блоку картинки) — уменьшаем отступ */
.product_buy_system{
    margin-top: 14px;      /* можешь поставить 0px если хочешь ещё выше */
    max-width: 720px;      /* сжимаем ширину, чтобы не расползалось на всю страницу */
}

/* вместо растянутого flex — делаем аккуратную сетку */
.product_buy_system_requirements{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 22px;
    justify-content: start;
    width: 100%;
}

/* чтобы значения не разъезжались */
.product_buy_system_item{
    min-width: 0;
}

/* ===== FIX: вернуть/показать SVG-иконки в Features слева ===== */
.product_buy_option_select_item{
    display: flex;
    align-items: center;
    gap: 10px;
}

.product_buy_option_select_item svg{
    display: block !important;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* =========================================================
   PRODUCT PAGE CENTER + WIDTH FIX
   Вставь В САМЫЙ НИЗ CSS
   ========================================================= */

/* 1) Главный контейнер страницы товара — делаем общий max-width и центр */
section.products#products {

    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* 2) Чтобы padding/width не ломали сетку */
section.products#products *,
section.products#products *::before,
section.products#products *::after {
    box-sizing: border-box !important;
}

/* 3) Верхний блок (картинки + покупка) — в строку, ровно и с gap */
section.products#products .products_top {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
}

/* 4) Левая часть (галерея + main image) */
section.products#products .products_images {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

/* мини-превью слева */
section.products#products .products_images_left {
    flex: 0 0 56px !important; /* ширина колонки миниатюр */
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* основная картинка */
section.products#products .products_image_main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* 5) Правая часть (покупка) — фикс ширина как было “красиво” */
section.products#products .products_buys {
    flex: 0 0 420px !important; /* подгони если надо: 380/400/440 */
    max-width: 420px !important;
}

/* 6) Блок “описание + system requirements” — тоже в строку и в ту же ширину */
section.products#products .products_info {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
    margin-top: 24px !important;
}

/* левый столбец описания */
section.products#products .products_info_left {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* правый столбец requirements */
section.products#products .products_info_right {
    flex: 0 0 420px !important;  /* чтобы совпадало по ширине с buys */
    max-width: 420px !important;
}

/* 7) Features — 100% ширины контейнера products */
section.products#products .products_features {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
}

/* 8) Адаптив: на узких экранах всё в колонку */
@media (max-width: 1100px) {
    section.products#products .products_top {
        flex-direction: column !important;
    }

    section.products#products .products_buys {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    section.products#products .products_info {
        flex-direction: column !important;
    }

    section.products#products .products_info_right {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ================== PRODUCT CARD (INFO + TABS + ACCORDION) ================== */



.product_card {
    margin-top: 28px;
    padding: 28px;
    border-radius: 26px;
    background: rgba(9, 22, 34, 0.72);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}

.product_card_top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.product_card_kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(127, 148, 168, 0.75);
    margin-bottom: 10px;
}

.product_card_title {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    color: #EAF3FF;
}

.product_card_brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(234, 243, 255, 0.85);
    font-weight: 600;
}

.product_card_brand_logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(101, 174, 248, 0.16);
    box-shadow: inset 0 0 0 1px rgba(101, 174, 248, 0.22);
}

.product_card_brand_text {
    font-size: 14px;
    letter-spacing: 0.04em;
}

.product_card_line {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 18px;
    margin-bottom: 18px;
}

.product_card_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.product_badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(12, 26, 38, 0.7);
    color: rgba(234, 243, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product_badge_primary {
    background: rgba(101, 174, 248, 0.14);
    box-shadow: inset 0 0 0 1px rgba(101, 174, 248, 0.25);
}

.product_badge_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #65AEF8;
    box-shadow: 0 0 0 4px rgba(101, 174, 248, 0.16);
}

.product_card_desc {
    color: rgba(234, 243, 255, 0.75);
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 18px;
}

.product_card_desc a {
    color: #65AEF8;
    text-decoration: none;
}

.product_card_desc a:hover {
    text-decoration: underline;
}

/* Tabs */

.product_card_tabs {
    margin-top: 14px;
}

.product_tabs_head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(12, 26, 38, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.product_tab_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(234, 243, 255, 0.78);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.product_tab_btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

.product_tab_btn.is_active {
    background: rgba(101, 174, 248, 0.16);
    color: #EAF3FF;
    box-shadow: inset 0 0 0 1px rgba(101, 174, 248, 0.28);
}

.product_tab_icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.product_tabs_body {
    margin-top: 16px;
}

.product_tab_panel {
    display: none;
}

.product_tab_panel.is_active {
    display: block;
}

/* Accordion */

.product_accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product_acc_item {
    border-radius: 20px;
    background: rgba(12, 26, 38, 0.55);
    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.product_acc_head {
    width: 100%;
    padding: 16px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.product_acc_left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product_acc_circle {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.product_acc_circle svg {
    opacity: 0.95;
}

.product_acc_title {
    color: #EAF3FF;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product_acc_chev {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    position: relative;
}

.product_acc_chev:before,
.product_acc_chev:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: rgba(234, 243, 255, 0.85);
    transform-origin: center;
}

.product_acc_chev:before {
    transform: translate(-55%, -50%) rotate(45deg);
}

.product_acc_chev:after {
    transform: translate(-45%, -50%) rotate(-45deg);
}

.product_acc_item.is_open .product_acc_chev:before {
    transform: translate(-55%, -50%) rotate(-45deg);
}

.product_acc_item.is_open .product_acc_chev:after {
    transform: translate(-45%, -50%) rotate(45deg);
}

.product_acc_body {
    display: none;
    padding: 0 20px 18px 76px;
}

.product_acc_item.is_open .product_acc_body {
    display: block;
}

.product_acc_text {
    color: rgba(234, 243, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
}

.product_acc_text ul {
    margin: 10px 0 0 18px;
    padding: 0;
}

.product_acc_text li {
    margin: 4px 0;
}

/* System tab grid */
.product_sys_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.product_sys_item {
    border-radius: 18px;
    background: rgba(12, 26, 38, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 16px;
}

.product_sys_name {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(127, 148, 168, 0.8);
    margin-bottom: 10px;
    font-weight: 700;
}

.product_sys_value {
    color: #EAF3FF;
    font-weight: 700;
}

/* Placeholder tabs */
.product_placeholder {
    border-radius: 18px;
    background: rgba(12, 26, 38, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 18px;
    color: rgba(234, 243, 255, 0.75);
}

/* Responsive */
@media (max-width: 980px) {
    .product_card {
        padding: 18px;
    }

    .product_card_top {
        flex-direction: column;
        align-items: flex-start;
    }

    .product_card_title {
        font-size: 28px;
    }

    .product_acc_body {
        padding: 0 16px 16px 16px;
    }

    .product_sys_grid {
        grid-template-columns: 1fr;
    }
}



/* ===== Status badge (green) ===== */

.product_badge_good {
    background: rgba(60, 255, 140, 0.10);
    box-shadow: inset 0 0 0 1px rgba(60, 255, 140, 0.22);
}

.product_badge_dot_good {
    background: #3CFF8C;
    box-shadow: 0 0 0 4px rgba(60, 255, 140, 0.16);
}

/* ===== Smooth accordion animation ===== */

.product_acc_body {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px 0 76px;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 320ms ease, opacity 220ms ease, transform 220ms ease, padding 220ms ease;
}

.product_acc_item.is_open .product_acc_body {
    max-height: 650px;
    padding: 0 20px 18px 76px;
    opacity: 1;
    transform: translateY(0);
}

/* Mobile padding stays correct */
@media (max-width: 980px) {
    .product_acc_body {
        padding: 0 16px 0 16px;
    }

    .product_acc_item.is_open .product_acc_body {
        padding: 0 16px 16px 16px;
    }
}



/* remove weird square near "FURY SERVICES" */
.product_card_brand_icon,
.product_card_brand_logo,
.product_brand_icon,
.product_brand_logo,
.product_card_brand > span:first-child,
.product_card_brand > div:first-child {
    display: none !important;
}

/* so text doesn't look offset */
.product_card_brand {
    gap: 0 !important;
    padding-left: 0 !important;
}

body {
    background: radial-gradient(
        1200px 600px at 50% -200px,
        #122536 0%,
        #0B1926 60%,
        #07121B 100%
    );
    color: #E6EEF6;
}


.header__container {
    background: linear-gradient(
        180deg,
        rgba(12, 32, 48, 0.95) 0%,
        rgba(11, 25, 38, 0.85) 100%
    );
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(101, 174, 248, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 50;
}



/* Убираем фон у основной секции страницы (который даёт "квадрат") */
.products,
#products {
  background: transparent !important;
  box-shadow: none !important;
}


/* Если фон рисуется псевдо-элементами (очень частая история) */
.products::before,
.products::after,
#products::before,
#products::after {
  content: none !important;
  display: none !important;
}

/* На всякий случай: если у секции есть границы/рамки */
.products {
  border: 0 !important;
}


/* ВАЖНО: убираем общий фон у футера (он и создаёт большой прямоугольник) */


/* А вот контейнер делаем красивой "плашкой" */


.header__container {
  border-radius: 16px;
}

.header__container {
  border-radius: 16px;
  overflow: hidden;
}

.container {
  max-width: 1200px; /* или твой размер */
  margin: 0 auto;
  padding: 0 24px;
}

/* === GLOBAL CONTAINER FIX (чтобы ВСЕ блоки были ровно по центру как шапка) === */
* { box-sizing: border-box; }

.site_container{
  width: 100%;
  max-width: 1320px;   /* можешь поставить 1200/1280/1360 — главное одинаково везде */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
 


/* === Mobile === */
@media (max-width: 720px){
  .footer_top{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer_right{
    text-align: left;
    margin-left: 0;
  }
}

:root{
  --edge-pad-y: 22px;     /* вертикальный отступ у шапки/футера */
  --edge-radius: 18px;

  --card-bg: rgba(11, 25, 38, 0.55);
  --card-border: rgba(127, 148, 168, 0.14);
  --card-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

/* одинаковые отступы сверху/снизу */
.header{
  padding: var(--edge-pad-y) 0;
}

.footer{
  padding: var(--edge-pad-y) 0 calc(var(--edge-pad-y) + 12px);
}

/* общий стиль “карточки” (как у блоков ниже) */
.ui_card{
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--edge-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* внутренняя “подушка” карточки */
.ui_card_pad{
  padding: 24px;
}

/* если нужно, чтобы карточка в hero была плотнее */
@media (max-width: 900px){
  .ui_card_pad{ padding: 16px; }
}

.products_hero_card{
  position: relative;
}

/* мягкая подсветка/градиент как у “премиум” блоков */
.products_hero_card::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(900px 300px at 15% 0%,
              rgba(101, 174, 248, 0.18),
              rgba(101, 174, 248, 0.00) 55%);
  pointer-events: none;
}

/* чтобы контент был выше подсветки */
.products_hero_card > .ui_card_pad{
  position: relative;
  z-index: 1;
}

/* ==========================================================
   PRODUCTS TOP CARD (photos + prices) - same glass background
   ========================================================== */

.products_top_card {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;

  /* glass background */
  background: rgba(11, 25, 38, 0.55);
  border: 1px solid rgba(127, 148, 168, 0.14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

  /* spacing vs other blocks */
  margin-bottom: 26px;
}

/* soft light like in header cards */
.products_top_card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 340px at 18% 0%,
      rgba(101, 174, 248, 0.18),
      transparent 60%),
    radial-gradient(700px 260px at 95% 30%,
      rgba(101, 174, 248, 0.10),
      transparent 55%);
  pointer-events: none;
}

/* subtle noise/overlay (optional but красиво) */
.products_top_card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.00)
  );
  pointer-events: none;
}

.products_top_card_inner {
  position: relative;
  z-index: 1;
  padding: 26px;
}

/* keep your inner block aligned and not stretched */
.products_top {
  width: 100%;
}

/* button stays full width of right block */
.products_top_card .product_buy_btn {
  width: 100% !important;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .products_top_card_inner {
    padding: 16px;
  }
}

/* ============ PRODUCTS TOP CARD: make left and right same height ============ */

.products_top_card_inner {
    padding: 18px;
}

.products_top {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 22px;
    align-items: stretch; /* важно: растягивает колонки на одинаковую высоту */
}

/* LEFT: gallery side */
.products_images {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: stretch;
    min-height: 100%;
}

.products_images_left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
}

.products_image_left {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(127, 148, 168, 0.16);
    background: rgba(10, 22, 33, 0.35);
    width: 64px;
    height: 44px;
}

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

/* MAIN image container must fill available height */
.products_image_main {
    min-height: 100%;
    display: flex;
}

.products_image_main .main_image {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(127, 148, 168, 0.14);
    background: rgba(10, 22, 33, 0.35);
    aspect-ratio: 16 / 9; /* задаёт норм пропорции */
}

.products_image_main .main_image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* заполняет контейнер без “дыр” */
    display: block;
}

/* RIGHT: buy card fills height and button pinned to bottom */
.products_buys {
    min-height: 100%;
    display: flex;
}

.products_buys form {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.product_buy_header {
    margin-bottom: 14px;
}

.product_buy_period {
    margin-top: 6px;
    flex: 1; /* растягивает список периодов, чтобы кнопка всегда уходила вниз */
}

.product_buy_btn {
    margin-top: 18px;
}

/* If you want more "card" vibe inside right side */
.products_buys form {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(127, 148, 168, 0.14);
    background: rgba(10, 22, 33, 0.35);
}

/* Make whole top card feel more unified */
.products_top_card {
    border-radius: 22px;
    border: 1px solid rgba(127, 148, 168, 0.12);
    background: linear-gradient(180deg, rgba(18, 33, 48, 0.72) 0%, rgba(10, 22, 33, 0.72) 100%);
}

/* Responsive */
@media (max-width: 980px) {
    .products_top {
        grid-template-columns: 1fr;
    }

    .products_images {
        grid-template-columns: 54px 1fr;
    }

    .products_image_left {
        width: 54px;
        height: 40px;
    }

    .products_image_main .main_image {
        aspect-ratio: 16 / 10;
    }
}









/* ================= FX LAYER (FINAL FIX) ================= */

/* Важно: не трогаем overflow-y, только X */
html, body { overflow-x: hidden; }

body{
  margin: 0;
  background: #071320;
}

/* FX слой никогда не должен создавать скролл */
.fx-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;          /* ключ */
}

/* фон НЕ должен быть больше экрана */
.fx-gradient{
  position: absolute;
  inset: 0;                /* ключ: НЕ -10% */
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(101,174,248,.14), transparent 60%),
    radial-gradient(700px 420px at 85% 25%, rgba(120,90,255,.10), transparent 62%),
    radial-gradient(900px 600px at 50% 90%, rgba(0,255,170,.06), transparent 65%),
    linear-gradient(180deg, #071320, #050d16);
}

/* canvas строго внутри fx-layer */
#snow{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: .85;
}

/* контент выше */
header, section, footer{
  position: relative;
  z-index: 1;
}

/* модалки выше всего */
.modal, .modal_backdrop{ z-index: 9999; }

/* ================= FIX FOOTER / STACKING ================= */

/* FX всегда снизу */
.fx-layer{ z-index: 0 !important; }

/* Весь сайт выше FX */
header, section, footer{
  position: relative;
  z-index: 10 !important;
}

/* Шапка чуть выше остальных блоков */
.header__container{
  position: relative;
  z-index: 20 !important;
}

/* Футер: чтобы точно был кликабельный и видимый */
.footer{
  position: relative;
  z-index: 10 !important;
}

/* Модалки поверх всего */
.modal, .modal_backdrop{
  position: fixed;
  z-index: 9999 !important;
}

/* ================= FOOTER FINAL (HARD OVERRIDE) ================= */
footer.footer{
  padding: 22px 0 34px !important;
  position: relative !important;
  z-index: 10 !important;
}

footer.footer .footer_box{
  width: 100% !important;
  background: rgba(11, 25, 38, 0.55) !important;
  border: 1px solid rgba(127, 148, 168, 0.14) !important;
  border-radius: 18px !important;
  padding: 22px 22px 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
}

footer.footer .footer_top{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

footer.footer .footer_brand{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

footer.footer .footer_brand_row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

footer.footer .footer_brand_name{
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #9fd0ff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

footer.footer .footer_links{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

footer.footer .footer_right{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-align: right !important;
  margin-left: auto !important;
}

footer.footer a,
footer.footer a:visited{
  color: #7F94A8 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  transition: color .15s ease, opacity .15s ease !important;
}

footer.footer a:hover{
  color: #9fd0ff !important;
}

footer.footer .footer_divider{
  margin: 16px 0 14px !important;
  height: 1px !important;
  background: rgba(127, 148, 168, 0.14) !important;
}

footer.footer .footer_bottom{
  width: 100% !important;
  text-align: center !important;
  color: rgba(127, 148, 168, 0.85) !important;
  font-size: 13px !important;
  padding: 14px 12px !important;
  border-radius: 12px !important;
  background: rgba(11, 25, 38, 0.35) !important;
  border: 1px solid rgba(127, 148, 168, 0.12) !important;
}

@media (max-width: 720px){
  footer.footer .footer_top{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  footer.footer .footer_right{
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* ================= MOBILE FIX: GALLERY THUMBNAILS ================= */
@media (max-width: 720px){

  /* вместо grid -> колонка */
  .products_images{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* миниатюры становятся горизонтальной лентой */
  .products_images_left{
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  /* чтобы скролл выглядел нормально */
  .products_images_left::-webkit-scrollbar{
    height: 6px;
  }

  .products_image_left{
    flex: 0 0 84px !important;     /* ширина превью */
    width: 84px !important;
    height: 58px !important;
    scroll-snap-align: start;
  }

  /* главная картинка */
  .products_image_main{
    width: 100% !important;
  }

  .products_image_main .main_image{
    width: 100% !important;
    aspect-ratio: 16 / 10;
  }
}

/* =================== MOBILE HERO: MORE HEIGHT FOR THUMBS (FIX OVERLAP) =================== */
@media (max-width: 980px){

  /* даём карточке больше внутренней высоты */
  .products_top_card_inner{
    padding: 18px !important;
  }

  /* hero внутри делаем колонкой */
  .products_top{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* блок картинок — отдельная зона сверху */
  .products_images{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* миниатюры сверху (отдельной полосой), чтобы не наезжали на заголовок справа */
  .products_images_left{
    order: 1 !important;
    margin: 0 !important;
  }

  /* main image ниже */
  .products_image_main{
    order: 2 !important;
  }

  /* правый блок покупки (с заголовком) идёт ПОСЛЕ картинок */
  .products_buys{
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* миниатюры нормального размера, но без “жёсткого” наезда */
  a.products_image_left{
    width: 120px !important;
    height: 72px !important;
  }

  /* main — чуть выше, чтобы красиво выглядело */
  .products_image_main .main_image{
    aspect-ratio: 16 / 9 !important;
  }
}

/* ===================== RECOVERY: BURGER + MOBILE MENU + GALLERY ===================== */

/* бургер по умолчанию скрыт на десктопе */
.menu{ display:none; }

/* mobile menu по умолчанию скрыт (иначе будет как “синие ссылки”) */
.menu_backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 99998;
  transition: opacity .18s ease;
}

.mobile_menu{
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;

  border-radius: 18px;
  background: rgba(11,25,38,0.92);
  border: 1px solid rgba(127,148,168,0.14);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);

  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;

  z-index: 99999;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}

.mobile_menu_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(127,148,168,0.12);
}

.mobile_menu_title{
  color:#EAF3FF;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.mobile_menu_close{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(127,148,168,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(234,243,255,0.9);
  cursor:pointer;
}

.mobile_menu_links{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
}

.mobile_menu_links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:14px;
  text-decoration:none;
  color: rgba(234,243,255,0.82);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(127,148,168,0.12);
}

.mobile_menu_buy{
  background: rgba(101,174,248,0.16) !important;
  border-color: rgba(101,174,248,0.28) !important;
  color:#EAF3FF !important;
  font-weight:800;
}

.mobile_menu_lang{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:4px;
}

.mobile_menu_lang a.is_active{
  background: rgba(101,174,248,0.16);
  border-color: rgba(101,174,248,0.28);
  color:#EAF3FF;
}

/* OPEN STATE */
body.menu_open .menu_backdrop{ opacity:1; pointer-events:auto; }
body.menu_open .mobile_menu{ opacity:1; transform: translateY(0); pointer-events:auto; }

/* =================== MOBILE THUMBS: FORCE HORIZONTAL (HARD FIX) =================== */
@media (max-width: 980px){

  /* делаем блок изображений колонкой: main сверху, миниатюры снизу */
  section.products#products .products_images{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* main image первым */
  section.products#products .products_image_main{
    order: 1 !important;
    width: 100% !important;
  }

  /* миниатюры вторым и ТОЛЬКО В РЯД */
  section.products#products .products_images_left{
    order: 2 !important;

    display: flex !important;
    flex-direction: row !important;     /* ключ */
    flex-wrap: nowrap !important;        /* ключ */
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;         /* скролл вправо */
    overflow-y: hidden !important;       /* убираем вертикалку */
    -webkit-overflow-scrolling: touch !important;

    padding: 2px 2px 8px !important;
    scroll-snap-type: x mandatory !important;
  }

  /* каждая миниатюра фиксированной ширины, чтобы было видно несколько */
  section.products#products a.products_image_left{
    flex: 0 0 auto !important;
    width: 92px !important;
    height: 60px !important;
    scroll-snap-align: start !important;
  }

  section.products#products a.products_image_left img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* на всякий случай: убираем любые grid-настройки, которые могли остаться */
  section.products#products .products_images_left,
  section.products#products .products_images{
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
  }
}

/* ===== BURGER VISIBILITY FIX ===== */
.menu{ display:none !important; }

@media (max-width: 980px){
  .menu{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    border-radius:14px;
    border:1px solid rgba(127,148,168,0.16);
    background: rgba(11,25,38,0.55);
    cursor:pointer;
    position: relative;
    z-index: 99997;
  }

  .menu span,
  .menu span::before,
  .menu span::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:2px;
    background: rgba(234,243,255,0.85);
    transform: translate(-50%,-50%);
    border-radius:2px;
  }
  .menu span::before{ transform: translate(-50%,-50%) translateY(-6px); }
  .menu span::after { transform: translate(-50%,-50%) translateY( 6px); }

  /* прячем десктопные пункты */
  .header_nav_item, .lang, .header_nav_item.btn{ display:none !important; }
}

/* ===== MENU OPEN STATE ===== */
.menu_backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 99998;
  transition: opacity .18s ease;
}
.mobile_menu{
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  border-radius: 18px;
  background: rgba(11,25,38,0.92);
  border: 1px solid rgba(127,148,168,0.14);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
body.menu_open .menu_backdrop{ opacity:1; pointer-events:auto; }
body.menu_open .mobile_menu{ opacity:1; transform: translateY(0); pointer-events:auto; }

/* =================== MOBILE FINAL: STOP OVERLAP (HARD OVERRIDE) =================== */
@media (max-width: 980px){

  /* 1) Главный контейнер hero всегда колонкой */
  section.products#products .products_top{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* 2) Возвращаем блок картинок в поток (у тебя он схлопывается в 0 высоту) */
  section.products#products .products_images{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    position: static !important;
    height: auto !important;
    min-height: 1px !important; /* важно: чтобы не было 0 */
    overflow: visible !important;

    order: 1 !important;
    margin: 0 0 10px 0 !important;
  }

  /* 3) На всякий случай: если где-то было absolute — убиваем */
  section.products#products .products_images_left,
  section.products#products .products_image_main,
  section.products#products .products_images_left * ,
  section.products#products .products_image_main *{
    position: static !important;
    float: none !important;
  }

  /* 4) Миниатюры строго горизонтально */
  section.products#products .products_images_left{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: 2px 2px 8px !important;
    margin: 0 !important;

    scroll-snap-type: x mandatory !important;
  }

  section.products#products a.products_image_left{
    flex: 0 0 auto !important;
    width: 92px !important;
    height: 60px !important;
    scroll-snap-align: start !important;
  }

  section.products#products a.products_image_left img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 5) Главная картинка (если у тебя показывается) */
  section.products#products .products_image_main{
    width: 100% !important;
    order: 2 !important;
  }

  section.products#products .products_image_main .main_image{
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* 6) Покупка ВСЕГДА ниже картинок */
  section.products#products .products_buys{
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
  }
}

/* =================== HOME PAGE (GLASS STYLE) =================== */

.main{ position: relative; z-index: 10; }

.section_head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin: 0 0 14px 0;
}
.section_title{
  color:#EAF3FF;
  font-weight:900;
  letter-spacing:.02em;
  font-size: 22px;
}
.section_sub{
  color: rgba(127,148,168,.9);
  font-size: 13px;
}

/* HERO */
.hero{ padding: 18px 0 10px; }
.hero_card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(11, 25, 38, 0.55);
  border: 1px solid rgba(127, 148, 168, 0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  padding: 22px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.hero_card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(101, 174, 248, 0.18), transparent 60%),
    radial-gradient(700px 260px at 95% 30%, rgba(120, 90, 255, 0.10), transparent 55%);
  pointer-events:none;
}
.hero_card > *{ position:relative; z-index:1; }

.hero_kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(127,148,168,.85);
  margin-bottom: 10px;
}
.hero_title{
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.1;
  color: #EAF3FF;
  font-weight: 900;
}
.hero_sub{
  color: rgba(234,243,255,.75);
  line-height: 1.6;
  font-size: 14px;
  max-width: 520px;
}
.hero_actions{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 16px;
}
.hero_btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding: 0 18px;
  border-radius: 14px;
  text-decoration:none;
}
.hero_link{
  color: rgba(234,243,255,.78);
  text-decoration:none;
  font-weight:700;
}
.hero_link:hover{ color:#9fd0ff; }

.hero_stats{
  display:grid;
  gap: 10px;
}
.hero_stat{
  border-radius: 16px;
  background: rgba(10, 22, 33, 0.35);
  border: 1px solid rgba(127,148,168,0.12);
  padding: 14px;
}
.hero_stat_label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(127,148,168,.85);
  margin-bottom: 8px;
  font-weight: 800;
}
.hero_stat_value{
  color:#EAF3FF;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap: 10px;
}
.dot_green{
  width:10px;height:10px;border-radius:50%;
  background:#3CFF8C;
  box-shadow: 0 0 0 6px rgba(60,255,140,.12);
}

/* PRODUCTS GRID */
.products_home{ padding: 16px 0 6px; }
.products_grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.p_card{
  text-decoration:none;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(11, 25, 38, 0.55);
  border: 1px solid rgba(127, 148, 168, 0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display:flex;
  flex-direction:column;
}
.p_card:hover{
  transform: translateY(-2px);
  border-color: rgba(101,174,248,0.28);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}

.p_img{
  position:relative;
  aspect-ratio: 16 / 9;
  background: rgba(10, 22, 33, 0.35);
}
.p_img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.p_img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.45));
  pointer-events:none;
}

.p_body{
  padding: 14px 14px 16px;
}
.p_title{
  color:#EAF3FF;
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.p_meta{
  color: rgba(127,148,168,.95);
  font-size: 13px;
  margin-bottom: 10px;
}
.p_cta{
  color:#9fd0ff;
  font-weight: 900;
  letter-spacing: .02em;
}

/* HOW */
.how{ padding: 16px 0 22px; }
.how_grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.how_card{
  border-radius: 20px;
  background: rgba(11, 25, 38, 0.55);
  border: 1px solid rgba(127, 148, 168, 0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  padding: 16px;
}
.how_head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.how_icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(127,148,168,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.how_icon img{ width: 20px; height: 20px; opacity: .95; }
.how_title{
  color:#EAF3FF;
  font-weight: 900;
  font-size: 15px;
}
.how_text{
  color: rgba(234,243,255,.75);
  font-size: 14px;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero_card{
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .hero_title{ font-size: 26px; }
  .products_grid{ grid-template-columns: 1fr; }
  .how_grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   ORDER PAGE — FINAL PREMIUM LAYOUT (DESKTOP + MOBILE)
   ВСТАВЬ В САМЫЙ НИЗ style.css
   ========================================================= */

/* безопасно: чтобы любые width/padding не ломали расчёты */
.order_page, .order_page * { box-sizing: border-box; }

/* основной контейнер оплаты */
main.main__container.order_page{
  width: 100%;
  max-width: 1400px !important;               /* было 1280 */
  margin: 0 auto !important;
  padding: 120px 24px 80px !important;
}

/* общая “стеклянная” карточка на весь блок */
.order_content{
  width: 100% !important;
  max-width: 1240px !important;               /* шире, чтобы не было “слева зажато” */
  margin: 0 auto !important;

  background: rgba(11, 25, 38, 0.55) !important;
  border: 1px solid rgba(127,148,168,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(10px) !important;

  padding: 26px !important;

  display: grid !important;
  grid-template-columns: minmax(560px, 1fr) minmax(420px, 520px) !important; /* правая шире */
  gap: 26px !important;
  align-items: start !important;
}

/* левая колонка — без ограничений ширины */
.order_detail{
  width: 100% !important;
  max-width: none !important;
}

/* заголовок */
.order_detail_title{
  margin: 0 0 18px 0 !important;
  line-height: 1.1 !important;
  font-size: 34px !important;
  letter-spacing: 0.01em !important;
}

/* блок email — чуть “дороже” */
.order_detail_contact{
  width: 100% !important;
  background: rgba(10, 22, 33, 0.35) !important;
  border: 1px solid rgba(127,148,168,0.12) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
}

.order_detail_contact_title{
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  color: rgba(234,243,255,0.9) !important;
  margin-bottom: 10px !important;
}

.order_detail_contact_desc{
  color: rgba(127,148,168,0.95) !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

.order_detail_contact_input{
  width: 100% !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(127,148,168,0.14) !important;
  background: rgba(11,25,38,0.45) !important;
  color: rgba(234,243,255,0.92) !important;
  padding: 0 14px !important;
  outline: none !important;
}

.order_detail_contact_input:focus{
  border-color: rgba(101,174,248,0.35) !important;
  box-shadow: 0 0 0 4px rgba(101,174,248,0.10) !important;
}

/* методы оплаты — аккуратный стек */
.payments_methods{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.payments_method{
  width: 100% !important;
  border-radius: 16px !important;
  padding: 14px 14px !important;

  background: rgba(10, 22, 33, 0.35) !important;
  border: 1px solid rgba(127,148,168,0.12) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;

  cursor: pointer !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}

.payments_method:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(101,174,248,0.26) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,0.35) !important;
}

.payments_method .payment_method_info{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(234,243,255,0.86) !important;
  line-height: 1.25 !important;
}

.payments_method .payment_method_info svg{
  flex: 0 0 auto !important;
  opacity: 0.95 !important;
}

.payments_method .payment_method_other{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #65AEF8 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(101,174,248,0.28) !important;
  background: rgba(101,174,248,0.10) !important;
}

/* активный метод */
.payments_method.is_active{
  border-color: rgba(101,174,248,0.38) !important;
  background: rgba(101,174,248,0.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35) !important;
}

/* правая колонка — отдельная “карточка” внутри общего блока */
.order_push{
  width: 100% !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;

  padding: 18px !important;
  border-radius: 18px !important;

  background: rgba(10, 22, 33, 0.35) !important;
  border: 1px solid rgba(127,148,168,0.12) !important;
}

/* КЛЮЧ: картинка теперь НЕ режется (contain), выглядит “как раньше” */
.order_image{
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;         /* широкий баннер */
  border-radius: 16px !important;
  overflow: hidden !important;

  background: rgba(11, 25, 38, 0.35) !important;
  border: 1px solid rgba(127,148,168,0.14) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px !important;                  /* чтобы “contain” не прилипал */
}

.order_image img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  object-fit: contain !important;            /* ВАЖНО: НЕ режет текст */
  object-position: center !important;
}

/* кнопка справа */
.order_push .btn,
.order_push input.btn{
  width: 100% !important;
  height: 54px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

/* ===== MOBILE ===== */
@media (max-width: 980px){
  main.main__container.order_page{
    padding: 92px 16px 60px !important;
  }

  .order_content{
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  .order_push{
    order: -1 !important;
    padding: 14px !important;
  }

  .order_image{
    aspect-ratio: 16 / 9 !important;
    padding: 8px !important;
  }

  .order_detail_title{
    font-size: 26px !important;
  }
}

/* =========================================================
   ORDER PAGE — SPACING FIX (FINAL OVERRIDE)
   вставь В САМЫЙ НИЗ style.css
   ========================================================= */

:root{
  --container-max: 1240px;
  --container-pad: 24px;

  /* отступ под шапкой */
  --order-top: 96px;
  --order-bottom: 56px;

  /* карточки */
  --card-pad: 24px;
  --card-gap: 22px;
}

/* на всякий случай, чтобы ничего не разъезжалось */
.order_page, .order_page *{ box-sizing: border-box; }

/* 1) РОВНЫЕ ОТСТУПЫ СТРАНИЦЫ */
main.main__container.order_page{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;

  padding-top: var(--order-top) !important;
  padding-bottom: var(--order-bottom) !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* 2) КАРТОЧКА ОПЛАТЫ: ЦЕНТР + ОДИНАКОВЫЕ ПАДДИНГИ */
.order_content{
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;

  padding: var(--card-pad) !important;
  gap: var(--card-gap) !important;

  /* если где-то выше было flex — фиксируем на grid */
  display: grid !important;
  grid-template-columns: minmax(520px, 1fr) minmax(420px, 520px) !important;
  align-items: start !important;
}

/* 3) ЛЕВАЯ / ПРАВАЯ КОЛОНКА — без лишних марджинов */
.order_detail, .order_push{
  margin: 0 !important;
}

/* чуть компактнее заголовок + блок email, чтобы визуально ровнее */
.order_detail_title{
  margin: 0 0 16px 0 !important;
}

.order_detail_contact{
  margin-bottom: 14px !important;
}

/* 4) ПРАВАЯ КАРТОЧКА (картинка+кнопка) — одинаковая “подушка” */
.order_push{
  padding: 18px !important;
  gap: 14px !important;
}

/* 5) чтобы между карточкой и футером не было огромной ямы */
footer.footer{
  margin-top: 42px !important;
}

/* ===== MOBILE ===== */
@media (max-width: 980px){
  :root{
    --container-pad: 16px;
    --order-top: 78px;
    --order-bottom: 46px;
    --card-pad: 16px;
    --card-gap: 14px;
  }

  .order_content{
    grid-template-columns: 1fr !important;
  }

  /* чтобы блок справа был сверху (как у тебя было) */
  .order_push{ order: -1 !important; }
}

/* =========================================================
   ORDER PAGE — MOBILE OVERFLOW + "HALF CIRCLE" FIX
   ВСТАВЬ В САМЫЙ НИЗ style.css
   ========================================================= */

@media (max-width: 520px){

  /* на всякий: не даём появляться горизонтальному скроллу */
  html, body{
    overflow-x: hidden !important;
  }

  /* главный контейнер — без странных вылетов по ширине */
  main.main__container.order_page{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ВАЖНО: карточка должна ОБРЕЗАТЬ всё, что торчит (полукруг/декор) */
  .order_content{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;     /* <- режет “полукруг” за блоком */
    border-radius: 18px !important;
  }

  /* если “полукруг” рисуется псевдо-элементом — выключаем */
  .order_content::before,
  .order_content::after,
  .order_push::before,
  .order_push::after{
    content: none !important;
    display: none !important;
  }

  /* внутренняя правая карточка тоже не должна торчать */
  .order_push{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* картинка/баннер — тоже в границы */
  .order_image{
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .order_image img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

@media (max-width: 520px){
  /* чтобы карточка всегда была по центру */
  .order_content{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* чтобы внутри не было “лишней” ширины из-за паддингов/бордеров */
  .order_content,
  .order_detail,
  .payments_methods,
  .payments_method,
  .order_detail_contact{
    max-width: 100% !important;
  }
}

/* ===== ORDER CARD: smaller + perfectly centered on mobile ===== */
@media (max-width: 520px){

  /* чтобы ничего не вылезало и не сдвигало страницу */
  html, body{ overflow-x: hidden; }

  /* сам блок оплаты делаем уже и строго по центру */
  .order_content{
    width: 100% !important;
    max-width: 380px !important;   /* попробуй 360/372/390 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
  }

  /* чтобы внутренние блоки не пытались быть шире карточки */
  .order_content *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* картинка сверху — тоже без “выпирания” */
  .order_image{
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* кнопка и инпуты красиво влезают */
  .order_push .btn,
  .order_push input.btn,
  .order_detail_contact_input{
    width: 100% !important;
  }
}

.product_acc_body {
	overflow: hidden;
}

.product_acc_body .product_acc_text {
	max-height: 420px; /* можешь увеличить: 480 / 520 */
	overflow-y: auto;
	padding-right: 8px;
}

/* Красивый скролл */
.product_acc_body .product_acc_text::-webkit-scrollbar {
	width: 6px;
}

.product_acc_body .product_acc_text::-webkit-scrollbar-thumb {
	background: rgba(127, 148, 168, 0.35);
	border-radius: 6px;
}

.product_acc_body .product_acc_text::-webkit-scrollbar-track {
	background: transparent;
}

.product_acc_text {
	mask-image: linear-gradient(
		to bottom,
		black 0%,
		black 85%,
		transparent 100%
	);
}

.mobile_menu_login {
	display: block;
	padding: 12px 0;
	font-size: 16px;
	color: #7F94A8;
	text-decoration: none;
}

.mobile_menu_login:hover {
	color: #ffffff;
}

/* === FINAL FIX: stack order === */

header,
main,
footer {
  position: relative;
  z-index: 2;
}

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
}