* {
    box-sizing: border-box;
}

body{
    overflow-x:hidden;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
    margin:0;
    background:#fff;
    color:#111
}

::placeholder {
    color: #4b5563;
    opacity: 1;
}

.container{
    width:1368px;
    margin:0 auto;
    padding:16px;
    position: relative
}

a{color:#0b5ed7;text-decoration:none}

.nav a{color: #0f172a;border-radius: 100px;padding: 0 15px;height:38px;line-height:38px;transition: background .3s ease 0s;font-weight: 500}
.nav {font-size: 14px}
.nav a:hover{background: #f3f4f6;}
.nav span{color: #111;position: relative;top: -1px}
.nav strong{color:#111;font-weight: 600;}
.btn{display:inline-block;padding:10px 15px;border:1px solid #e5e7eb;border-radius:100px;background:#fff;vertical-align: middle;    font-size: 13px;}
.btn-primary{background:#8378e9;color:#fff;border-color: #8378e9
}
.btn-danger{background:#dc3545;color:#fff;border-color:#dc3545}
.card{    border: 1px solid #f3f4f6;background: rgba(255, 255, 255, 0.4);border-radius:30px;padding:40px;margin-bottom:12px;box-shadow: 0 25px 70px rgb(25 65 125 / 4%);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:15px}
.grid-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(435px,1fr));gap:15px}
.grid-services{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(655px, 1fr));
    gap:15px
}
.grid .card {
    background: rgba(255, 255, 255, 0.4);
    position: relative;
    transition: box-shadow .3s ease 0s, background .3s ease 0s;
    border: 1px solid #f3f4f6;
    display: block;
    &:hover {
        box-shadow: 0 4px 12px #0000000a;
        background: rgba(255, 255, 255, 0.7);
        .swirl::before {
            animation: 1s ease 0s 1 normal both running shine;
        }
    }
    &:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
}
.carousel__slide .card {
    background: rgba(255, 255, 255, 0.4);
    position: relative;
    transition: box-shadow .3s ease 0s, background .3s ease 0s;
    border: 1px solid #fff;
    display: block;
    &:hover {
        box-shadow: 0 4px 12px #0000000a;
        background: rgba(255, 255, 255, 0.9);
        .swirl::before {
            animation: 1s ease 0s 1 normal both running shine;
        }
    }
    &:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.table th,.table td{padding:8px;border-bottom:1px solid #eee;text-align:left}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom: 15px;
    input {
    margin-top: 5px;
}
}
.form-row-line {
    grid-template-columns:auto;
}
.card {
    textarea {
        margin-top: 5px;
    }
}
.btn-auth {
    width: 100%;
    height: 40px;
    cursor: pointer;
}
.btn-contacts {
    width: 100%;
    height: 40px;
    cursor: pointer;
}
.vendor-btn {
    width: 100%;
    margin-bottom: 25px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 15px;
    font-weight: 500;
    background: #fff;
    color: #111827;
    img {
        border-radius: 100%!important;
    }
}
input,select,textarea{width:100%;padding:10px 15px;border:2px solid #e5e7eb;background:#ffffff9c;border-radius:0.5rem; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;}
input[type="checkbox"] {width: auto}
h1,h2{margin:8px 0 12px}
.flash{padding:10px;border-radius:8px;margin:8px 0}
.flash-ok{background:#d1e7dd}
.flash-err{background:#f8d7da}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #e5e7eb}
.role-admin{background:#ffeeba}
.role-seller{background:#cfe2ff}
.role-buyer{background:#e2e3e5}
footer{

}
.trix-content .attachment--file {border: none}
.nav { display:flex; gap:5px; align-items:center; padding:15px 0 }
.right-menu {
    margin-left:auto;display:flex; gap:8px; align-items:center
}
.nav .search-form {  display:flex; gap:8px; align-items:center }
.nav .search-form input { padding: 1px 15px 0 15px;border:1px solid #e5e7eb; height: 38px; outline: none; border-radius:100px; min-width:220px; background: #ffffff82;
&:hover {
    background: rgba(255, 255, 255, 0.7);
}}
.nav .search-form .btn { background: #fff}
.card .thumb{
    width:125px;
    height:125px;
    object-fit:contain;
    object-position:center;
    display:block;
    margin-bottom:8px;
}
.card-sticky {
    height: fit-content;
    position: sticky;
    top: 80px;
    max-width: 330px;
    min-width: 330px;
}
.card-product-shoq {
    width: 100%;
}
.trix-content h2 {
    font-size: 1.625em;
}
.trix-content img {

}
.decor-img-1 {
    display: none;
    scale: .5;
    position: absolute;
    top: 300px;
    left: -140px;
    z-index: -1;
}
main {
    padding-top: 100px!important;
}
footer {

}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    background: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .3s ease 0s;
    .container {
        padding: 0 16px;
        .nav {
            padding: 10px 0;
        }
    }
}
.header-color {
    background: rgba(255, 255, 255, 0.9);
    .nav .search-form input {
        border: 1px solid #e5e7eb;
    }
}



.card-row {
    display: flex;width: 100%;gap: 10px;
    .btn-cart {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        cursor: pointer;
        font-weight: 500;
    }
}

.btn[disabled], .btn.btn-disabled, .btn-primary[disabled]{
    background:#d7d7d7; color:#666; border-color:#c7c7c7; cursor:not-allowed; box-shadow:none; opacity:1;
}
.cart-count{
    display:inline-block;
    min-width:20px; padding:0 6px; margin-left:6px;
    font-size:12px; line-height:18px; text-align:center;
    background:#111; color:#fff!important; border-radius:999px;
    vertical-align:middle;
}

button {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
}

.btn.btn-accent{ background:#64cfa8; border-color:#64cfa8; color:#fff; height: 40px;cursor: pointer }
.btn.btn-accent:hover{ filter:brightness(0.95); }
.search-block{
    display:flex;
    gap:8px;
    max-width:640px;
    margin:24px auto 0;
}
.search-block input[type="text"]{
    flex:1;
    padding:0;
    font-size:16px;
    border:none;
    outline: none;
    background: transparent;
}
.search-block .btn{
    padding:12px 16px;
}
.label-search {
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 15px 15px 100px 25px;
    box-shadow: 0 100px 70px rgba(25, 65, 125, .1);
    cursor: text;
    border-radius: 30px;
    position: relative;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #ffffff;
    transition: background .5s ease 0s;
    &:hover {
        background: rgba(255, 255, 255, 0.7);
    }
}
.btn-search-top {
    min-width: 38px;
    height: 38px;
    padding: 2px 0 0 0;
    font-size: 20px;
    cursor: pointer;
}
.search-block {
    padding-bottom: 80px;
    padding-top: 15px;
    .btn-search {
        border-radius: 100%;
        background: #212121;
        width: 50px;
        height: 50px;
        padding: 0;
        color: #fff;
        font-size: 25px;
        line-height: 50px;
        cursor: pointer;
        svg {
            width: 25px;
            height: 25px;
        }
    }
}
.keywords-search {
    position: absolute;
    bottom: 20px;
    width:auto;
    display: flex;
    gap: 10px;
    & span {
        cursor: pointer;
        border-radius: 100px;
        font-size: 14px;
        padding: 0 10px;
        line-height: 27px;
        height: 30px;
        background: #f3f4f652;
        border: 1px solid #fff;
        color: #4b5563;
        &:hover {
            background:#f3f4f6;
        }
        &:focus {
            outline:2px solid #212121; outline-offset:2px;
        }
    }
}
.nav .logo-top {
    padding: 0;
    background: transparent!important;
    margin-right: 30px;
    height: auto;
    line-height: normal;
    img {
        max-width: 130px;
        position: relative;
        top: 2px;
        height: auto;
    }
}

.tags { display:flex; gap:8px; flex-wrap:wrap; }
.tags .tag{
    display:inline-block; padding:4px 8px; border-radius:999px;
    background:#f2f2f2; font-size:12px; text-decoration:none; color:#333;
}
.tags .tag:hover{ background:#e8e8e8; }

.card-preview {
    color: #0f172a;
}

:root{
    --card-w: 620px;
    --radius-outer: 28px;
    --radius-inner: 18px;
    --bg: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --line: #e5e7eb;
    --pill-bg: #f3f4f6;
    --price-old: #9ca3af;
    --ok: #34d399;
    --shadow: 0 10px 30px rgba(2, 6, 23, 0.06), 0 2px 6px rgba(2, 6, 23, 0.04);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}


.wrap{ min-height:100%; display:grid; place-items:center; padding:32px; }

.top{ display:grid; grid-template-columns: 120px 1fr; gap: 20px; align-items:center; }
.top h3{ margin-top: 0;margin-bottom: 10px}
.app-icon{
    width: 125px; height: 125px; position: relative; );
}
.app-icon .swirl{ position:absolute; inset:0; display:grid; place-items:center;overflow: hidden;
    &:before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: "";
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
        opacity: .2;

    }
}
.app-icon svg{ width: 72px; height:72px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }

h1{ margin: 0 0 8px; font-size: 34px; line-height:1.1; letter-spacing: -0.01em; color: var(--text); }
.subtitle{ font-size: 16px; line-height:1.45; color:#6b7280; max-width: 480px; }


.divider{ margin:20px 0 14px; border:0; border-bottom: 2px dashed var(--line); }


.meta{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 16px; }


.vendor{ display:flex; align-items:center; gap:14px; span {color: #4b5563}}
.vendor .logo{ overflow:hidden;border: 1px solid #DDDDDD; width:35px; height:35px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.vendor .logo img {
    width: 100%;
    height: 100%;
}
.vendor .title{ font-size:20px; color:#334155; }


.card .price{ display:flex; align-items:baseline; gap: 16px; }
.old{ font-size:26px; color: var(--price-old); position:relative; }
.old::after{ content:""; position:absolute; left:-4px; right:-6px; top:50%; height:2px; background: currentColor; transform: rotate(-8deg); }
.new{ font-size:26px; font-weight:700; color:#111827; }


.bottom{ margin-top: 14px; display:flex; align-items:center; gap:12px; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding: 0 10px; border-radius: 999px; background: #f3f4f654; color:#4b5563; font-size:14px;line-height: 27px;
    height: 30px; }
.pill svg{ width: 18px; height:18px; }


.verified{ position:absolute;     right: 40px;
    bottom: 40px;  border-radius:50%; display:grid; place-items:center;  }
.verified svg{ width:18px; height:18px; stroke:#fff; stroke-width:3; fill:none; }


@media (max-width: 860px){
    h1{ font-size: 38px; }
    .subtitle{  }
    .price .old{ font-size:26px; }
    .price .new{ font-size:26px; }
}

.bg-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    z-index: -2;
    animation-name: transform;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes transform {
    0% {
        opacity: 0;
        scale: 1.3;
        transform: rotate(-10deg);
    }
    100% {
        opacity: 1;
        scale: 1.9;
        transform: rotate(0);
    }
}

@keyframes shine {
    100% {
        left: 130%
    }
}

h1, h2, h3, h4 {
    font-family: "koho", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h3 {
    line-height: 25px;
}

h2 {
    font-size: 26px;
}

.breadcrumbs{ font-size:13px; margin:8px 0 16px; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.breadcrumbs li{ display:flex; align-items:center; }
.breadcrumbs li+li::before{ content:"/ "; margin:0 10px 0 6px;position: relative;top: -1px }
.breadcrumbs a{      padding: 0 10px;
    border-radius: 999px;
    background: #f3f4f65e;
    color: #4b5563;
    font-size: 13px;
    line-height: 27px;
    height: 30px;display: inline-flex
;
    align-items: center;}
.breadcrumbs span{      padding: 0;
    border-radius: 999px;
    background: transparent;
    color: #484a4e;
    font-size: 13px;
    line-height: 27px;
    height: 30px;display: inline-flex
;
    align-items: center;}
.breadcrumbs a:hover{ text-decoration:none; }
.breadcrumbs .current{  font-weight:600; }

.yt-thumb {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.yt-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}


.vmodal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    z-index: 1000;
}
.vmodal.open { display: flex; }
.vmodal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
}
.vmodal__dialog {
    position: relative;
    width: min(90vw, 1000px);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.vmodal__close {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: rgba(0,0,0,.5); color: #fff;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 24px; line-height: 1; cursor: pointer;
}
.vmodal__content {
    width: 100%; height: 100%;
}
.vmodal__content iframe {
    width: 100%; height: 100%; border: 0; display: block;
}

.value {
    --text: #0f172a;
    --muted: #5b6472;
    --brand: #3b82f6;
    --brand-soft: rgba(59,130,246,.12);
    --card-bg: #fff;
    --shadow: 0 10px 30px rgba(20, 40, 80, .10), 0 2px 6px rgba(20, 40, 80, .06);

    padding: 80px 0;
    position: relative;
    isolation: isolate;
    border-radius: 30px;
    ul {
        padding-left: 18px;
        color: #6b7280;
        line-height: 1.8;
    }
}

.value__container{
    max-width: 100%;
    margin: 0 auto;

    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.value__intro{
    flex: 1 1 118px;
    padding-right: 75px;
}

.value__title{
    margin: 76px 0 18px;
    line-height: 1.1;
    font-size: 35px;
    color: var(--text);
}

.value__lead{
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    max-width: 48ch;
}

.value__cards{
    flex: 1 1 580px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.value__card{
    flex: 1 1 calc(50% - 14px);
    border-radius: 30px;
    padding: 40px!important;
    box-shadow: 0 25px 70px rgb(25 65 125 / 4%);
    transition: background .7s ease 0s, border .7s ease 0s;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.4);
    &:hover {
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 1);

        & lottie-player {
            scale: 1.1;
        }
    }
    & lottie-player {
        transition: scale .7s ease 0s;
    }
}

.value__card:hover{

}

.value__icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
}

.value__card-title{
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text);
}

.value__card-text{
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
    font-size: 15px;
}

@media (max-width: 1024px){

}

@media (max-width: 680px){
    .value__card{ flex-basis: 100%; }
    .value{ padding: 44px 16px; }
}

.carousel { position: relative; }

.carousel__top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    position: absolute;
    right: 0;
    top: -50px;
}

.carousel__controls {
    display: inline-flex;
    gap: 8px;
}

.carousel__track {
    position: relative;
    min-height: 1px;
}

.carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
}

.carousel__slide.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.carousel__btn {
    position: static;
    translate: none;
    border: none;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.carousel__btn svg { display: block; }

.carousel__btn:disabled {
    opacity: .4;
    cursor: default;
}

.carousel__btn[hidden] { display: none !important; }

.auth-container {
    max-width: 500px;
    margin: 0 auto;
}
.contacts-container {

}
.user-menu { position: relative; margin-left: 8px; display: flex!important;}
.user-menu .avatar-btn {
    background: transparent; padding: 0; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb;
}
.user-menu .avatar-btn img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 50%;
    background: #f3f4f6;
    padding: 0;
}

.user-menu .menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px; background: #fff; border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    border-radius: 10px; padding: 8px; display: none; z-index: 1000;
}
.user-menu,
.user-menu:focus-within .menu { display: block; }
.user-menu .menu a {
    display: block; border-radius: 8px;
    text-decoration: none; color: #111827; font-size: 14px;
}
.user-menu .menu a:hover { background: #f3f4f6; }
.user-menu .menu .menu-sep {
    height: 1px; background: #e5e7eb; margin: 6px 0;
}
.user-menu .menu .menu-header {
    padding: 4px 8px 8px; border-bottom: 1px dashed #e5e7eb; margin-bottom: 6px;
}
.user-menu .menu .menu-header .name { font-weight: 600; }
.user-menu .menu .menu-header .role { font-size: 12px; color: #6b7280; }

.user-menu.anon .avatar-btn {
    min-width: auto; height: 38px; padding: 0 10px 0 13px;
    border-radius: 100px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: #111827; width: auto;font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif
}
.user-menu.anon .avatar-btn:hover { background: #fff; }
.user-menu .avatar-btn .avatar-text { font-weight: 500; top: -1px }

.nav-item.has-mega { position: relative; }
.mega-trigger { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; }
.mega-trigger:focus { outline: none; }

.mega-panel {
    padding: 80px 10px 10px 10px;
    position: absolute;
    top: -25px;
    left: -195px;
    width: 1395px;
    margin-top: 10px;
    background: #fff; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15,23,42,.12), 0 2px 10px rgba(15,23,42,.06);
    border: 1px solid rgba(2,6,23,.06);
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: -1;
}
.has-mega.open .mega-panel {  opacity: 1;
    transform: scale(1);
    pointer-events: auto; }
.has-mega.open .mega-trigger {
    background: #f3f4f6;
}


.mega-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 15px 15px 10px; border-bottom: 1px dashed rgba(2,6,23,.08); }
.mega-title { font-weight: 600; opacity:.9; }
.mega-cta { padding:8px 14px; border-radius: 10px; }

.mega-grid {
    display:grid; gap:5px; padding:12px;
    grid-template-columns: repeat(3, minmax(0,1fr));
    &.mega-groups {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
}
@media (max-width: 900px) { .mega-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 640px) {

}

.nav .mega-item {
    display:flex; align-items:center; gap:10px;
     border-radius:12px; text-decoration:none;
     transition: background .15s ease;
    height: auto;
    line-height: normal;
    padding: 8px 12px;
    span {
        color:#6b7280!important;
    }
}
.nav .mega-item:hover { background: transparent!important;
    span {
        color: #0f172a!important;
    }
}
.mega-title-left {
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 12px 20px;
    display: flex;
}
.nav .mega-btn {
    margin-left: auto;
    height: auto;
    line-height: normal;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    white-space: nowrap;
    background-color: #fff;
    border-radius: 100px;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    min-height: 35px;
    padding: 6px 14px;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow .3s;
    display: flex;
    font-size: 13px;
    box-shadow: 0 2px 6px #122b690a, 0 1px 2px #122b6914, 0 0 0 1px #122b6914;
}
.mega-sec-groups {
    border-radius: 16px;
    background-image: linear-gradient(17deg, rgba(244, 238, 253, 0.5), rgba(240, 246, 253, 0.5));
}

.mega-logo {
    width:25px; height:25px;display:flex; align-items:center; justify-content:center;

    overflow: hidden;
}
.mega-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.mega-fallback {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color:#475569;
}
.mega-text { font-weight: 500; }
.mega-columns{
    display:flex; gap:16px;
}
.mega-description {
    padding: 0 20px 15px 20px;
    .mega-btn {
        margin-top: 20px;
    }
}
@media (max-width: 900px){ .mega-columns{ grid-template-columns: 1fr; } }
.mega-sec-title{ font-weight:600;

    padding: 15px 20px; }


.bg-top-decor {
    position: absolute;
    left: 0;
    right: 0;
    top: 55px;
    margin: 0 auto;
    z-index: -2;
    opacity: .3;
    scale: 1.3;
}

.value-steps {
    position: relative;
    isolation: isolate;
    p {
        margin-top: 0;
    }
    .description {
        margin-bottom: 30px;
        color: #5b6472;
        font-size: 16px;
    }
    .mega-btn {
        height: auto;
        line-height: normal;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        white-space: nowrap;
        background-color: #fff;
        border-radius: 100px;
        flex: 0 auto;
        justify-content: center;
        align-items: center;
        min-height: 35px;
        padding: 6px 14px;
        font-weight: 500;
        text-decoration: none;
        transition: box-shadow .3s;
        display: flex;
        font-size: 13px;
        box-shadow: 0 2px 6px #122b690a, 0 1px 2px #122b6914, 0 0 0 1px #122b6914;
        max-width: 200px;
        margin-top: 30px;
    }
}

.qo-spinner{
    display:none;
    width:16px; height:16px;
    margin-left:8px;
    border:2px solid currentColor;
    border-top-color: transparent;
    border-radius:50%;
    vertical-align:-2px;
    animation: qo-spin .8s linear infinite;
}
@keyframes qo-spin { to { transform: rotate(360deg); } }
.btn--loading .qo-spinner{ display:inline-block; }

.trix-content .yt-card{ position:relative; display:block; max-width:100%; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); margin:8px 0; }
.trix-content .yt-thumb{ display:block; line-height:0; position:relative; }
.trix-content .yt-thumb img{ width:100%; height:auto; display:block; }
.trix-content .yt-thumb__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.55); }
.trix-content .yt-thumb__play::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; }

.mega-panel .mega-columns{
    display:grid;
    grid-template-columns:1.1fr 2.2fr 1.1fr;
    gap:15px;
    align-items:start;
}


.mega-sec-groups .mega-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    padding: 0 10px 15px;
    column-gap:25px;
}
.mega-sec-groups .mega-head{
    margin:0 0 15px 0;
    font-weight:600;
    font-size:16px;
    grid-row:1;
}
.mega-sec-groups .mega-head:nth-child(1){ grid-column:1; }
.mega-sec-groups .mega-head:nth-child(2){ grid-column:2; }
.mega-sec-groups .mega-col{ grid-row:2; }
.mega-sec-groups .mega-col:nth-of-type(1){ grid-column:1; }
.mega-sec-groups .mega-col:nth-of-type(2){ grid-column:2; }

.mega-icon{
    width:28px;height:28px;flex:0 0 28px;
    border-radius:8px;object-fit:cover;aspect-ratio:1/1;
    background:#f3f4f6;display:block;
}

.mega-row{
    display:flex;align-items:center;gap:10px;
    padding:6px 0;text-decoration:none;color:inherit;
}
.mega-row:hover {
    background: transparent!important;
}
.mega-text{ font-size:14px; line-height:1.25; }

.mega-list{ display:flex;flex-direction:column;gap:6px; }
.mega-products{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px; }

.mega-fallback{
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:8px;background:#eef2f7;color:#6b7280;font-size:12px;font-weight:700;
}
.store-hero{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 18px}
.sh-logo img{width:96px;height:96px;border-radius:16px;object-fit:cover;display:block}
.sh-logo-ph{width:96px;height:96px;border-radius:16px;display:grid;place-items:center;background:#f3f4f6;color:#6b7280;font-weight:600;font-size:28px}

.sh-title{margin:0 0 6px;font-size:20px;line-height:1.2}
.sh-desc{color:#374151}

.sh-meta{display:flex;gap:20px;margin-top:12px;padding-top:12px;border-top:1px dashed #e5e7eb}
.sh-item{display:flex;align-items:center;gap:8px;min-width:0}
.sh-label{color:#6b7280;font-size:12px;flex:0 0 auto}

.sh-pill{border: 1px solid #fff;display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#f5f6fa78;font-size:13px;color:#111;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sh-pill:hover{background:#eef0f7}

.sh-socials{display:flex;align-items:center;gap:8px;margin-top:15px}
.sh-social-list{display:flex;flex-wrap:wrap;gap:8px}

.home-title {
    text-align: center;
    font-size: 65px;
    padding-top: 70px;
}

.site-footer{    margin-top: 80px;
    border-top: 1px solid #ffffff;
    background: #ffffff00;
    z-index: 1;
    position: relative;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(50px);}
.site-footer .container{padding:28px 16px}
.f-grid{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr 1fr}
@media (max-width: 1024px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.f-grid{grid-template-columns:1fr}}

.f-col{min-width:0}
.f-col-wide{grid-column: span 1}
@media (min-width: 1025px){.f-col-wide{grid-column: span 1}}
.f-brand{display:flex;flex-direction:column;gap:10px}
.f-logo img{display:block;height:auto}
.f-tagline{margin:0;color:#6b7280;font-size:13px}

.f-title{margin:0 0 25px;font-size:14px;font-weight:600;color:#111}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-link{color:#374151;text-decoration:none;font-size: 13px;}
.f-link:hover{color:#111;text-decoration:underline}

.f-list-media .f-media{display:flex;align-items:center;gap:8px;text-decoration:none;color:#374151}
.f-media:hover{color:#111}
.f-img{width:28px;height:28px;border-radius:8px;object-fit:cover;background:#f3f4f6;display:inline-block}
.f-img-fallback{display:inline-grid;place-items:center;font-size:12px;color:#6b7280}

.f-products{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width: 900px){.f-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.f-product{display:flex;align-items:center;gap:8px;text-decoration:none;color:#374151}
.f-product:hover{color:#111}
.f-prod-img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#f3f4f6}

.f-text{font-size:13px;line-height:1.2}
.f-bottom{margin-top:22px;padding-top:16px;border-top:1px dashed #fff;display:flex;justify-content:space-between;align-items:center}
.f-copy{font-size:13px;color:#6b7280}

.home-description {
    text-align: center;
    font-size: 16px;
    margin: 20px auto 25px auto;
    max-width: 745px;
}

.mega-search-btn {
    display: none;
}

:root{
    --card-bg: #fff;
    --muted:   #64748b;
    --ring:    #e2e8f0;
    --accent:  #6366f1;
    --glow:    rgba(99,102,241,.15);
}

@media (prefers-color-scheme: dark){
    :root{
        --card-bg:#0b1220;
        --muted:#94a3b8;
        --ring:#1f2937;
        --glow:rgba(99,102,241,.25);
    }
}


.testimonial{
    max-width: 920px;
    margin: 28px auto;
    padding: 0 16px;
}

.testimonial__card{
    margin: 0;
    position: relative;
    padding: 28px clamp(18px, 3vw, 25px);
}

.testimonial__card::before{
    content:"❝";
    position: absolute;
    font-size: clamp(100px, 22vw, 170px);
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--accent);
    opacity: .1;
    pointer-events: none;
    transform: translateY(-10%);
    filter: blur(.3px);
}
.testimonial__card::before{ top:-50px; left:-15px; }

.testimonial__media{
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.testimonial__avatar{
    width:72px; height:72px; border-radius:50%;
    object-fit: cover;
    box-shadow: 0 8px 16px -10px var(--glow);
    background: #cbd5e1;
}

.testimonial__meta{
    display:flex; flex-direction:column; gap:4px;
}

.testimonial__name{
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.testimonial__company{
    color: var(--muted);
    font-size: .95rem;
}

.testimonial__text{
    position: relative;
    margin: 10px 0 0 0;
    padding: clamp(6px, 1vw, 8px) 0 0 0;
    line-height: 1.65;
}

.product-group-home {
    margin-bottom:80px;
    margin-top: 80px;
    z-index: 1;
    position: relative;
}

.prime-btn {
    padding: 15px 35px!important;
    display: inline-block;
    background: #594cd6;
    color: #fff;
    border-radius: 100px;
    font-size: 16px;
    margin-top: 35px!important;
    box-shadow: 0 2px 6px #122b690a, 0 1px 2px #122b6914, 0 0 0 1px #122b6914;
}

#desc_html {
    max-height: 700px;
}

@media (max-width: 460px){
    .testimonial__media{ grid-template-columns: 56px 1fr; gap: 12px; }
    .testimonial__avatar{ width:56px; height:56px; }
}

@media (max-width:1380px) {
    .container {
        width: 1250px;
    }
    .mega-panel {
        width: 1280px;
    }

}

@media (max-width:1265px) {
    .container {
        width: 100%;
        overflow: hidden;
    }
    header {
        .container {
            overflow: inherit;
        }
    }
    .mega-panel {
        width: 100vw;
    }
}

@media (max-width:1165px) {
    .contacts-container {
        .value__cards {
            display: block;
            padding: 0;
            border: none;
            box-shadow: none;
            .value__contacts {
                margin-bottom: 35px;
            }
        }
    }
    .nav .search-form input {
        border: 1px solid #fff!important;
    }
    .card .form-row {
        display: block;
    }
    .card-sticky {
        &>img {
            max-width: 100%!important;
            width: 100%!important;
            height: auto;
        }
    }
    header {
        .container {
            padding: 0 20px;
        }
    }
    .keywords-search {
        span{
            &:last-child {
                display: none;
            }
        }
    }
    .site-footer .container {
        padding: 20px 0;
    }
    .grid .card {
        border: 1px solid #f3f4f6;
        h3 {
            margin-bottom: 5px;
        }
    }
    h1 {
        margin-bottom: 15px;
        font-size: 35px;
    }
    .top {
        grid-template-columns: 90px 1fr;
        align-items: normal;
    }
    .card .thumb {
        width: 90px;
        height: 90px;
    }
    .app-icon {
        width: 90px;
        height: 90px;
    }
    .product-group-home {
        margin-bottom:30px;
        margin-top: 30px;
    }
    .value__intro {
        padding-right: 0;
    }
    .card-sticky {
        top: 0;
    }
    .product-group {
        padding: 0;
        h2 {
            padding:  0;
        }
    }
    .value {
        padding: 20px 0;
    }
    .card, .value__card {
        padding: 20px;
    }
    .mega-search-btn {
        width: 38px;
        line-height: 42px!important;
        text-align: center;
        display: inline-block;
        padding: 0!important;
        vertical-align: bottom;
        margin-left: 5px;
    }
    .user-menu {
        display: none!important;
    }
    .right-menu {
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, .12), 0 2px 10px rgba(15, 23, 42, .06);
        border: 1px solid rgba(2, 6, 23, .06);
        padding: 10px;
        display: inline-block!important;
        width: 100%;
        opacity: 0;
        transform: scale(0.95);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        margin: 0 auto;
    }
    .open-search {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
    .value__title {
        margin-top: 15px;
    }
    .keywords-search {
        span {
            font-size: 12px;
            padding: 0 8px;
            line-height: 23px;
            height: 25px;
        }
    }
    .home-description {
        font-size: 16px;
    }
    .container {
        padding: 20px;
    }
    .home-title {
        font-size: 35px;
        padding-top: 50px;
    }
    .sh-socials {
        display: block;
        .sh-label {
            margin-bottom: 10px;
            display: block;
        }
    }
    .sh-item {
        margin-bottom: 10px;
    }
    .sh-meta {
        display: block;
    }
    .sh-logo {
        margin-bottom: 15px;
    }
    .store-hero {
        display: block;
    }
    .mega-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .mega-panel {
        padding: 10px;
        position: fixed;
        left: 0;
        top: auto;
        max-height: min-content;

        width: 100%;
        margin: 12px auto 0;

        right: 0;
    }
    .mega-sec-groups .mega-two{ grid-template-columns:1fr; display: block}
    .mega-sec-groups .mega-head:nth-child(2), .mega-sec-groups .mega-col:nth-of-type(2){ grid-column:1; }
    .mega-sec-groups {
        .mega-head {
            margin: 10px 0 0 0;
            border: none;
        }
    }
    .mega-panel {
        overflow: auto;
        height: 100vh;
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        margin: 15px auto 0;
        padding: 0 0 150px 0;
        .mega-columns{
            grid-template-columns:1fr;
            gap: 5px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid rgba(2, 6, 23, .06);
        }
    }
    .value__container {
        flex-direction: column;
    }
    .pages-top-link, .right-menu {
        display: none;
    }
    .nav-item {
        &.has-mega {
            margin-left: auto;
            .mega-trigger, .mega-search-btn {
                border: 1px solid #d8d8d8;
                background: #f3f4f6;
            }
        }
    }
    .nav {
        transform: translateY(0px);
        translate: 0;
        .logo-top {
            img {
                max-width: 125px;
            }
        }
    }
    .card-row {
        display: block;
    }
    .card-sticky {
        max-width: 100%;
        min-width: 100%;
        .product-img {
            display: block;
            margin: 0 auto 15px;
        }
    }
    .value__title{
        font-size: 22px;
    }
    h2 {
        font-size: 22px;
    }
}

@media (max-width:380px) {
    .home-title, h1 {
        font-size: 33px;
    }
}