/*
 ________  __       __       __    __  _____      __
|   __   ||  |     /  \     |  |  |  ||  __ \    |  |
|  |__|  ||  |    /    \    |  |\ |  || |__) |   |  |
|   _____||  |   /  /\  \   |  | \|  ||      /   |  |____ ___      ___
|  |      |  |  /  /__\  \  |  |\ |  ||  __  \   |  ___  |\  \    /  /
|  |      |  | /  /    \  \ |  | \|  || |__)  |_ | |___| | \  \__/  /
|__|      |__|/__/      \__\|__|  |__||_______(_)|_______|  \      /
                                                            _|    /
                                                           |     /
                                                           |____/
*/


/* Show Once ---------------------- */
    *[data-show-once-id]:not(.hystmodal) {display: none;}


/* HYST MODAL ---------------------- */
    /* right & left orientation ---------------------- */
        .hystmodal-right .hystmodal__window, 
        .hystmodal-left .hystmodal__window{margin: 0;}
        
        .hystmodal-right .hystmodal__wrap {align-items: end;}
        .hystmodal-right .hystmodal__close {left: -40px;}
        
        .hystmodal-left .hystmodal__wrap {align-items: start;}
    
    /* wide ---------------------- */
        #myModal-wide .hystmodal__window, #myModal-right .hystmodal__window {width: 700px;border-radius: 20px;border: 1px solid #222222;}
        #modal-order-confirmation .hystmodal__window {width: 650px;}

    /* custom view & animaion ---------------------- */
        /* default ---------------------- */
            .hystmodal__wrap {perspective: 1000px;}
            .hystmodal:not(.hystmodal-right):not(.hystmodal-left) .hystmodal__window {transform: rotateX(10deg) translate(0, 50px) scale(.9);transition: .5s;}
            .hystmodal--active:not(.hystmodal-right):not(.hystmodal-left) .hystmodal__window {transform: translate(0, 0);}
            .hystmodal__shadow {background-color: #fff;}
            .hystmodal__shadow--show {opacity: .4;}
        
        /* right & left ---------------------- */
            .hystmodal-right .hystmodal__window {transform: translate(100px, 0); opacity: 1;}
            .hystmodal-left .hystmodal__window {transform: translate(-100px, 0); opacity: 1;}
            .hystmodal-right.hystmodal--active .hystmodal__window,
            .hystmodal-left.hystmodal--active .hystmodal__window{transform: translate(0, 0)}

/* PlanB Modal ---------------------- */
    /*behavior*/
        .fon_modal {z-index: 10001;top: 0;left: 0;bottom: 0;right: 0;position: fixed;display: none;}
        .modalwrapper {-webkit-overflow-scrolling: touch;perspective: 1000px;overflow-y: scroll;z-index: 1000;top: 0;right: 0;width: 100%;height: 100%;display: none;position: fixed;}
        .modal {left: 50%;transform: translate(-50%, 0%) rotateX(50deg) scale(.6);bottom: auto;opacity: 0;z-index: 10002;box-sizing: border-box;transition: 1s;display: none;position: absolute;}
        .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;}
        .modal .close_modal {position: absolute;z-index: 999999;text-align: center;cursor: pointer;transition: .5s;}

    /*modal width & position*/
        .modal {width: 600px;top: 50%;}
        .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;}

    /*style*/
        .modalwrapper {-webkit-backdrop-filter: blur(18px);backdrop-filter: blur(18px);background: rgb(0 0 0 / 15%);}
        .modal {background: #fff;border-radius: 5px;padding: 40px;}
        .modal .close_modal {right: 10px;top: 10px;color: var(--textcolor);background: transparent;width: 35px;height: 35px;line-height: 35px;font-size: 30px;border-radius: 5px;}
        .modal .close_modal:hover {transform: rotate(90deg);}
        .modal h3 {font-weight: 700;font-size: 20px;text-transform: uppercase;line-height: 24px;padding: 20px 0 0;}
        .modal h3, .modal p {color: var(--textcolor)}
        .fon_image img {max-height: 200px;width: auto;display: block;margin: 0 auto;border-radius: 10px;}

/* Список - галочки  ---------------------- */
    ul.check-list {margin: 15px 0}
    ul.check-list li {list-style-type: none;padding-left: 40px;position: relative;margin-bottom: 5px;margin-left: 0;}
    ul.check-list li:before {background: url(/assets/images/icons/check_black.png) 50% 50%/15px no-repeat;left: 12px;top: 7px;width: 15px;height: 15px;position: absolute;content: "";display: inline-block;}
    
/* Список кружочки  ---------------------- */
    ul.circle-list, .text-in-content ul {margin: 15px 0}
    .circle-list li, .text-in-content ul > li {list-style-type: none;margin-bottom: 8px;position: relative;}
    .circle-list li:before, .text-in-content ul > li:before {right: calc(100% + 10px);top: 7px;border: 2px solid var(--color-red);width: 8px;height: 8px;border-radius: 100px;position: absolute;display: block;content: '';}

/* ol li customization ---------------------- */
    ol.numbered, .text-in-content ol {counter-reset: myCounter;margin: 15px 0}
    ol.numbered li, .text-in-content ol > li {margin-bottom: 5px;list-style-type: none;padding-left: 10px;position: relative;}
    ol.numbered li:before, .text-in-content ol > li:before {background: var(--color-red);color: #fff;counter-increment:myCounter;content:counter(myCounter);position:absolute;left: -30px;top:-2px;display:inline-block;text-align:center;margin:5px 10px;width:17px;height:17px;line-height:17px;border-radius:20px;font-size:.7em}

/* Fancybox  ---------------------- */  
    a[data-fancybox] {position: relative;display: block;}
    a[data-fancybox]:after {background: url(/assets/images/icons/zoom_white.png) 50% 50%/20px no-repeat, #00000024;display: block;content:"";position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition:.5s;}
    a[data-fancybox]:hover:after {opacity: 1;}

/* Breadcrumbs  ---------------------- */  
    ul.breadcrumb {font-size: .8em;width: 100%;margin: 0;padding: 10px 0;box-sizing: border-box;margin-top: 5px;}
    .breadcrumb li {display: inline-block;line-height: 1.2;list-style-type: none;padding-left: 0 !important;margin-bottom: 0 !important;margin-left: 0 !important;margin-right: 3px;color: #464646;}
    .breadcrumb li a {color: #464646;}


/* OWL Carousel  ---------------------- */  
    /* arrows 1 */
        .owl-arrows1 .owl-nav button {width: 30px !important;height: 30px !important;line-height: 30px !important;font-size: 0 !important;border-radius: 50px;top: 50%;transform: translateY(-50%);outline: none;position: absolute;}
        .owl-arrows1 .owl-nav .owl-prev {left: 5px;background: url(/assets/images/icons/arrow_left_white.png) 50% 50%/100% no-repeat !important;}
        .owl-arrows1 .owl-nav .owl-next {right: 5px;background: url(/assets/images/icons/arrow_right_white.png) 50% 50%/100% no-repeat !important;}

    /* arrows 2 */
        .owl-arrows2 {padding: 0 40px;margin: 0;box-sizing: border-box;}
        .owl-arrows2 .owl-prev, 
        .owl-arrows2 .owl-next {background: var(--maincolor2) !important;color: #fff !important;height: 30px;width: 30px;border-radius: 100px;padding: 0;box-sizing: border-box;font-size: 0;position: absolute;transition: 0.3s;top: 50%;transform: translateY(-50%);outline: none;}
        .owl-arrows2 .owl-prev {left: 0px}
        .owl-arrows2 .owl-next {right: 0px;}
        
        .owl-arrows2 .owl-next.disabled,
        .owl-arrows2 .owl-prev.disabled {background: var(--grey) !important;}
    
    /* arrows 3 */
        .owl-arrows3 .owl-nav {top: -50px;right: 0;position: absolute;}
        .owl-arrows3 .owl-nav button {width: 40px;height: 40px;line-height: 40px !important;background: var(--maincolor2) !important;color: #222 !important;border-radius: 5px;margin-left: 10px;outline: none;}
        .owl-arrows3 .owl-nav button.disabled {background: var(--grey) !important;color: #222 !important;cursor: initial;}
        
    /* dots 1 */
        .owl-dots1 .owl-dots {margin-top: 10px;text-align: center;}
        .owl-dots1 .owl-dots button {background: var(--grey) !important;width: 10px;height: 10px;margin: 0 4px;border-radius: 30px;transition: .2s;outline: none;display: inline-block;}
        .owl-dots1 .owl-dots button.active, 
        .owl-dots1 .owl-dots button:hover {background: var(--maincolor) !important}
    
    /* dots 2 */
        .owl-dots2-wrapper {text-align: center;line-height: 10px;}
        .owl-dots2 .owl-dots {border-radius: 25px;text-align: center;line-height: 0;position: absolute;z-index: 1;bottom: 15px;left: 50%;transform: translateX(-50%);}
        .owl-dots2 button {right: 0;transform: none;top: 0;height: 100%;background: var(--maincolor2) !important;width: 50px;opacity: 0.5;transition: .5s;z-index: 2;}
        .owl-dots2 button.active, 
        .owl-dots2 button:hover {background: var(--maincolor) !important;}
    
/* TABLE  ---------------------- */  
    .table{max-width:100%;overflow-x:auto;width: 100%;}
    .table table {width: 100%}
    .table::-webkit-scrollbar {width: 5px;height: 5px;background: var(--maincolor);}
    .table::-webkit-scrollbar-track {background: transparent;}
    .table::-webkit-scrollbar-thumb {background-color: var(--grey);border-radius: 10px;}
    
    .table tr {border-bottom: 1px solid #f3f4f4;text-align: center;}
    .table tr:last-child {border: none;}
    .table td {padding: 5px 10px;color: var(--textcolor);vertical-align: middle;text-align: left;width: auto !important;height: auto !important;}
    .table td:last-child, .table th:last-child {text-align: right;}
    .table tr th {font-weight: 600;padding: 5px 10px;background: var(--maincolor);color: #fff;}

/* TABS  ---------------------- */  
    .tabs__content {display: none;}
    .tabs__content.active {display: block;width: 100%;}
    .tabs__content ul.colors_ral li {list-style: none;margin-left: 0;}
    .tabs__caption {margin-bottom: 0;list-style-type: none;overflow: hidden;border-bottom: 1px solid var(--sky)}
    .tabs__caption>li {font-weight: 400;padding: 15px 0;display: inline-block;margin: 0;border-right: 1px solid var(--sky);position: relative;text-align: center;box-sizing: border-box;cursor: pointer;transition: .5s;}
    .tabs__caption>li:last-child {border-right: none;}
    .tabs__caption>li.active {background: var(--maincolor);color: #fff;}
    .tabs__caption>li:nth-child(2) {margin-right: 0;}
    .tabs__caption>li:hover {background: var(--maincolor);color: #fff;}
    

    .tabs__content {padding: 20px;box-sizing: border-box;}
    .tabs__caption {display: table;width: 100%;}
    .tabs__caption > li {display: table-cell;}
    
    .slides .owl-stage-outer, .showmore .owl-stage-outer {padding: 8px 0;}


/* faq */
    .q {padding: 15px 40px 15px 0;background: transparent;position: relative;color: var(--milk);border-bottom: 1px solid var(--maincolor2);cursor:pointer;transition:border-color .5s;z-index:2;}
    .q:after {position: absolute;content: "";right: 20px;top: 50%;transform: translateY(-50%);text-align: center;background: url(/assets/images/icons/arrow_down_white.png)  50% 50% no-repeat;width: 12px;height: 12px;background-size: 12px 12px;line-height: 12px;border-radius: 0;transition: .5s;}
    .a {padding: 15px 0;border-top:0;margin-bottom:20px;display:none;line-height: 26px;z-index:2;}
    .q.open:after {transform: translateY(-50%) rotate(180deg);}
    
    #faq-section .contact-info-card {padding: 25px;}



    
/* Icons Docs pdf docx xls  ---------------------- */     
a[href$=".pdf"].icon-file, 
a[href$=".doc"].icon-file, 
a[href$=".docx"].icon-file,
a[href$=".xls"].icon-file{position: relative;font-size:1.5rem;color: var(--maincolor2);font-weight: 600;border-radius: 10px;display: inline-block;margin-bottom: 20px;padding: 20px 40px 20px 60px;background: var(--grey) url(/assets/images/icons/files/pdf-file.png) 15px/30px no-repeat;background-size: 30px 30px;transition: .5s;}
a[href$=".doc"].icon-file, 
a[href$=".docx"].icon-file  {background: var(--grey) url(/assets/images/icons/files/docx-file.png) 15px 25px/30px no-repeat;background-size: 30px 30px;}
a[href$=".xls"].icon-file  {background: var(--grey) url(/assets/images/icons/files/xls-file.png) 15px 25px/30px no-repeat;background-size: 30px 30px;}

/* Before Line  ---------------------- */ 
    .before-line {position: relative;color: var(--hcolor);padding: 0 0 0 130px;}
    .before-line:before {display: inline-block;height: 2px;width: 100px;background: var(--hcolor);content: "";position:  absolute;top: 50%;transform: translateY(-50%);left: 0;}

/* Full width block  ---------------------- */ 
    .fw {position: relative;}
    .fw:before,.fw:after {content: '';display: block;background: inherit;position: absolute;height: 100%;width: 10000px;top: 0;}
    .fw:before{right: 100%;} .fw:after{left: 100%;}
    
/* HR Shadow  ---------------------- */     
    .hr-shadow{position:relative;overflow:hidden;height:25px}.hr-shadow:after{position:absolute;content:'';z-index:1;height:20px;top:-20px;left:50%;width:100%;margin-left:-50%;-webkit-border-radius:200px/10px;-moz-border-radius:200px/10px;border-radius:200px/10px;box-shadow:0 0 30px rgba(0,0,0,.28)}

/* Sweet Alert  ---------------------- */  
    .swal2-container {width: 35rem !important;}
    .swal2-popup.swal2-toast {padding: 2rem !important;font-size: 2rem !important;}
    h2#swal2-title {font-size: 1.5rem;line-height: 1.5rem !important;}
    .swal2-html-container {font-size: 1rem !important;line-height: 1.5rem !important;}
    html.swal2-shown,body.swal2-shown {height: auto!important;}
    
    body.swal2-shown {
  height: auto !important;
  overflow-y: auto !important;
  padding-right: 0 !important;
}

html.swal2-shown {
  overflow-y: auto !important;
  padding-right: 0 !important;
}
    
/* Gridzy  ---------------------- */  
    .gridzyItem img {width: 100%;}

    #scrollup {width: 45px;height: 45px;right: 20px;bottom: 20px;position: fixed;border-radius: 5px;opacity: 0;visibility: hidden;background: var(--maincolor2);cursor: pointer;text-align: center;display: flex;justify-content: center;align-items: center;transition: 0.5s;transform: rotate(180deg);z-index: 10;}



/* ============================================================ */
/*                         ROOT VARIABLES                       */
/* ============================================================ */
:root {
    /* Colors */
    --white: #fff;
    --color-darker: #0a0a0a;
    --color-dark: #111111;
    --color-gray: #1f1f1f;
    --color-red: #e74c3c;
    --color-orange: #FE4708;
    --color-yellow: #FEAA0A;
    --color-text: #f2f3f0;
    --color-text-muted: #9ca3af;
    --color-text-dim: #6b7280;
    --color-border: rgba(255,255,255,0.05);
    --color-border-light: rgba(255,255,255,0.1);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #FEAA0A 0%, #FE4708 100%);
    --gradient-brand-h: linear-gradient(to right, #FEAA0A, #e74c3c);

    /* Shadows */
    --shadow-red: 0 0 30px rgba(231,76,60,0.4);
    --shadow-orange: 0 0 20px rgba(254,71,8,0.4);

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 30px;
    --radius-full: 9999px;
}


/* ============================================================ */
/*                          GLOBAL                              */
/* ============================================================ */
body {
    font-family: 'Urbanist', sans-serif;
    background-color: var(--color-darker);
    color: var(--color-text);
    overflow-x: hidden;
}

::selection {
    background: var(--color-orange);
    color: white;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-darker); }
::-webkit-scrollbar-thumb { background: var(--color-orange); border-radius: 4px; z-index: 9999;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #fff;
    line-height: 1.2;
    font-family: 'Urbanist', sans-serif;
}

.h1 {font-size: clamp(3rem, 5vw, 5rem); }
.h2 {font-size: clamp(2.5rem, 4vw, 4rem)}
.h3 {font-size: clamp(2.3rem, 3.5vw, 3rem)}
.h4 {font-size: clamp(2rem, 3vw, 2.8rem); }
.h5 {font-size: clamp(1.8rem, 2.5vw, 2.4rem)}
.h6 {font-size: clamp(1.7rem, 2vw, 2rem)}

a { text-decoration: none;color: var(--color-orange); }

img { max-width: 100%; /*display: block;*/ }

li { margin-left: 0; list-style: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }



/* ====================================================== */
/*                 COLOR & BG UTILITIES                   */
/* ====================================================== */

.mc {color: var(--maincolor);}
.accent {color: var(--accent);}
.maincolor {color: var(--maincolor);}
.text-darker {color: var(--darker);}
.text-gray {color: var(--textcolor);}
.text-gray-light {color: var(--grey4);}
.text-white {color: #fff;}
.text-primary {color: var(--maincolor);}
.text-accent {color: var(--accent);}

.bg-white {background: #fff;}
.bg-light {background: var(--grey);}
.bg-grey {background: var(--grey);}
.bg-primary {background: var(--maincolor);}
.bg-primaryLight {background: var(--primaryLight);}
.bg-accent {background: var(--accent);}
.bg-accentLight {background: var(--accentLight);}
.bg-darker {background: var(--darker);}
.bg-dark {background: var(--dark);}

.shadow-soft {box-shadow: var(--boxshadow-soft);}
.shadow-float {box-shadow: var(--boxshadow-float);}
.shadow-xl {box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);}
.shadow-2xl {box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);}

.maincolor {color: var(--maincolor)}
.maincolor2 {color: var(--maincolor2)}
.textcolor {color: var(--textcolor)}
.hcolor {color: var(--hcolor)}
.red {color: var(--red)}
.blue {color: var(--blue)}
.green {color: var(--green)}
.yellow {color: var(--yellow)}
.grey {color: var(--grey)}
.grey2 {color: var(--grey2)}
.grey3 {color: var(--grey3)}
.grey4 {color: var(--grey4)}
.sky {color: var(--sky)}
.white {color: var(--white)}
.dark {color: var(--dark)}
.boxshadow, .bshad {box-shadow: var(--boxshadow)}
.mlr-auto {margin-left: auto;margin-right: auto;}
.border-grey {border: 1px solid var(--grey);}


.bg-maincolor {background: var(--maincolor);}
.bg-maincolor2 {background: var(--maincolor2);}
.bg-textcolor {background: var(--textcolor);}
.bg-hcolor {background: var(--hcolor);}
.bg-red {background: var(--red);}
.bg-blue {background: var(--blue);}
.bg-green {background: var(--green);}
.bg-yellow {background: var(--yellow);}
.bg-grey {background: var(--grey);}
.bg-sky {background: var(--sky);}
.bg-white {background: var(--white);}
.bg-dark {background: var(--dark);}
.bg-maincolor2 {background: var(--maincolor2);}


/* useful classes */
.main {max-width: 1480px;clear: both;box-sizing: border-box;margin: 0 auto;padding: 0 20px;position: relative;}
.maxwidth768 {max-width: 768px;margin: 0 auto;}
.small {font-size: .85em;line-height: 1.5em;}
.url  {border-bottom: 1px dotted;display:inline-block;text-decoration:none;}
.warning {background-color: #FDF7DF;border: 1px solid #FEEC6F;color: #C9971C;font-weight: 700;padding: 10px 20px;border-radius: 10px;}
.maxwidth600 {max-width: 600px;}
.maxwidth700 {max-width: 700px;}
.maxwidth800 {max-width: 800px;}
.maxwidth900 {max-width: 900px;}
.maxwidth1000 {max-width: 1000px;}
.maxwidth1200 {max-width: 1200px;}
.curp {cursor: pointer;}
[data-copy-to-clipboard] {cursor: pointer;}



    
    /* file  ---------------------- */  
        .labelFile{padding:0;line-height:40px;text-align: center;font-size: 15px;max-width:200px;margin: 10px 0;display:block;border: 1px solid var(--maincolor2);position: relative;border-radius: 20px;}
        .input-file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
        .input-file + .labelFile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;cursor:pointer}
        .labelFile:before {content: "";background: url(/assets/images/icons/upload.png) 50% 50%/100% no-repeat;color: var(--maincolor2);font-family: 'FontAwesome';display: inline-block;left: 10px;width: 13px;height: 13px;margin-right: 5px}
    /* checkboxes  ---------------------- */  
        input[type=checkbox] {position: relative;background: #fff;border-radius: 2px;cursor: pointer;line-height: 0;margin: 0 0.6em 0 0;outline: 0;padding: 0 !important;vertical-align: text-top;height: 20px;width: 20px;-webkit-appearance: none;border: 1px solid var(--maincolor)}
        input[type=checkbox] + label {cursor: pointer;margin-right: 20px}
        input[type=checkbox]:checked:before {border: solid var(--maincolor);border-width: 0 2px 2px 0;margin: -1px -1px 0 -1px;width: 4px;height: 10px;content: '';position: absolute;right: 50%;top: 50%;transform: rotate(45deg) translate(-50%, -50%);z-index: 2;}
        
        input.checkbox + label {cursor: pointer}
        input.checkbox {vertical-align: top;width: 17px;height: 17px;margin: 0 3px 0 0}
        input.checkbox:not(checked) {position: absolute;opacity: 0}
        input.checkbox:not(checked) + label {position: relative;padding: 0 0 0 60px}
        input.checkbox:not(checked) + label:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2)}
        input.checkbox:not(checked) + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: all .2s}
        input.checkbox:checked + label:before {background: #9FD468}
        input.checkbox:checked + label:after {left: 26px}

    /* radio  ---------------------- */  
       /*  input[type="radio"] {display: none;}
       input[type="radio"] + label {position: relative;padding-left: 25px;display: block;cursor: pointer;}
       input[type="radio"] + label:before {left: 0;top: 7px;border: 1px solid var(--maincolor);width: 15px;height: 15px;border-radius: 50%;cursor: pointer;box-sizing: border-box;line-height: 0;position: absolute;display: block;content: "";}
       input[type="radio"] + label:after {top: 11px;left: 3.5px;width: 8px;height: 8px;background: var(--maincolor);position: absolute;display: block;content: "";transition: .2s;transform:scale(0);border-radius: 50%;}
       input[type="radio"]:checked + label:after {transform:scale(1);}
       
       input[type="radio"][disabled] + label {color: #ccc;}
       input[type="radio"][disabled] + label:before,
       input[type="radio"][disabled] + label:after {border-color: #ccc;} */
        
        
        input[type=radio] {position: relative;background: #fff;border-radius: 2px;cursor: pointer;line-height: 0;margin: 0 0.6em 0 0;outline: 0;padding: 0 !important;vertical-align: text-top;height: 20px;width: 20px;-webkit-appearance: none;border: 1px solid var(--maincolor)}
        input[type=radio] + label {cursor: pointer;}
        input[type=radio]:before {background: var(--maincolor);width: 12px;height: 12px;content: '';position: absolute;left: 3.5px;top: 3.5px;transform: scale(0);z-index: 2;transition: .2s;}
        input[type=radio]:checked:before {transform: scale(1);}
        
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
        }
        
        
        
    /* Super Select  ---------------------- */
        .super-select {color: var(--grey4);background: var(--grey);border-radius: 5px;margin: 0;line-height: 50px;width: 100%;box-sizing: border-box;position: relative;white-space: nowrap;}
        
        /* decoration line  ---------------------- */
            .super-select:before {background: #31afbb;background: linear-gradient(90deg,#31afbb,#673ab7);content: "";width: 0;border-radius: 5px 5px 0 0;height: 3px;position: absolute;top: 0px;left: 50%;transition: .3s;z-index: 2;}
            .super-select:hover:before {left: 0;width: calc(100% + 1px);}
        
        /* overlay  ---------------------- */
            .super-select .super-select-overlay {padding: 0 20px;cursor: pointer;}
            .super-select .super-select-overlay .super-select-overlay-selected {color: #000;font-size: .8em;margin-left: 20px;display: inline-block;text-overflow: ellipsis;overflow: hidden;vertical-align: middle;max-width: 150px;}
            .super-select .arrow {right: 15px;height: 30%;top: 50%;transform: translateY(-50%);position: absolute;}
            .super-select.open .arrow {transform-origin: 50% 50%;transform: scale(1,-1) translateY(50%);}
        
        /* options  ---------------------- */
        
            .super-select .super-select-wrapper {color: #000;max-height: 300px;overflow: auto;background: #fff;width: 100%;left: 0;top: 100%;z-index: 20;position: absolute;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;transform: scale(0);transition: .1s linear;transform-origin: 50% 0;}
            .super-select.open .super-select-wrapper {transform: scale(1);transition: .4s cubic-bezier(0, 0.97, 0.37, 0.96);}   
            
            .super-select .super-select-wrapper::-webkit-scrollbar {width: 5px;background: transparent;}
            .super-select .super-select-wrapper::-webkit-scrollbar-track {background: transparent;}
            .super-select .super-select-wrapper::-webkit-scrollbar-thumb {background-color: var(--maincolor2);border-radius: 10px;}
            
            .super-select .super-select-wrapper > * ,
            .super-select .super-select-wrapper > * {padding: 0 20px;display: block;cursor: pointer;}
            .super-select .super-select-wrapper > *  span {display: inline-block;/* border-bottom: 1px solid var(--grey);line-height: 40px */}
            .super-select .super-select-wrapper > *  i {display: none;}
    
            .super-select .super-select-wrapper > *:hover {background: var(--grey);}



        .smallbutton, 
        .button, 
        .bigbutton {border-radius: 10px;color: #fff;font-weight: 700;background: var(--maincolor);white-space: nowrap;cursor: pointer;font-family: var(--fontfamily);font-size: var(--fontsize);border: 0;outline: none;display: inline-block;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
        
        .smallbutton {line-height: var(--smallbuttonheight);padding: 0 15px;border-radius: 5px;}
        .button {line-height: var(--buttonheight);padding: 0 30px;}
        .bigbutton {line-height: var(--bigbuttonheight);padding: 0 50px;}
        
            /* colors  ---------------------- */  
                .smallbutton.red, .button.red, .bigbutton.red {background: var(--red);}
                .smallbutton.grey, .button.grey, .bigbutton.grey {background: var(--grey4);}
        
            /* full width  ---------------------- */  
                .smallbutton.db, 
                .bigbutton.db, 
                .button.db {width: 100%;padding-left: 5px;padding-right: 5px;}
        
            /* image  ---------------------- */  
                .smallbutton img {width: 10px;margin-right: 5px;transform:translateY(-1px);vertical-align: middle;display: inline-block;}
                .button img {width: 15px;margin-right: 5px;transform:translateY(-2px);vertical-align: middle;display: inline-block;}
                .bigbutton img {width: 15px;margin-right: 7px;transform:translateY(-3px)}
                
            /* effect  ---------------------- */  
                .effect{position:relative;overflow:hidden;vertical-align: top;}
                .effect:before{content:'';width:100%;height:60px;display:block;position:absolute;z-index:3;border-left:100px solid rgba(255,255,255,.3);box-shadow:-20px 30px 30px rgba(255,255,255,.3);background:0 0;top:0;left:-100px;margin-left:-1px;transition:all 0s ease-in-out;transform:translate(0,0)}
                .effect:hover:before{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform:translate(115%,0);-moz-transform:translate(115%,0);-ms-transform:translate(115%,0);-o-transform:translate(115%,0);transform:translate(115%,0)}
                .effect[disabled]:before {display: none;}
            
            /* disabled  ---------------------- */  
                .smallbutton[disabled],
                .button[disabled],
                .bigbutton[disabled], .btn-submit[disabled], .btn[disabled] {background: #707070;color: #fff;cursor: not-allowed;}


/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
    
    /* Header  ---------------------- */
    #header .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; }
    
    .header-left { flex: 1; display: flex; align-items: center; }
    .header-center { flex: 2; display: flex; justify-content: center; }
    .header-contacts { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
    
    #header .logo {outline: none !important;outline-offset: 0;border: 0;}
    #header .logo img {width: 65px;}
    
    #header a.tel { display: block; line-height: 1.2; }
    #header .time { display: block; font-size: 0.8em; opacity: 0.8; text-align: right; }
    
    #header .main_menu { display: flex; gap: 20px; }
        
    .min  #header {box-shadow: var(--boxshadow);}


 /* Main menu ---------------------- */
        #mainmenu {box-sizing: border-box;margin-bottom: 0;margin-left: 50px;background: transparent;height: var(--mainmenu-height);}
        .mobile-mainmenu-button, .mobile-mainmenu-outer {display: none;}

        /* DESKTOP  ---------------------- */
        /* STYLE */
            /* common  ---------------------- */
                ul.desktop-mainmenu {margin-bottom: 0;display: inline-block;}
                ul.desktop-mainmenu li {margin: 0;padding: 0;list-style-type: none;box-sizing: border-box}
                ul.desktop-mainmenu a {color: #fff;height: auto;font-weight: 400;text-decoration: none;}
                ul.desktop-mainmenu a:hover, ul.desktop-mainmenu li.active a, ul.desktop-mainmenu li:hover a {text-decoration:none;}
                    /* submenu */
                    ul.desktop-mainmenu ul.submenu {width: 250px;border-top: none;background: rgb(31 31 31 / 92%);backdrop-filter: blur(12px);border: 1px solid rgba(255, 255, 255, 0.05);/* background: #171717; *//* border: 1px solid #272727; */margin: 0;padding: 20px 20px;box-shadow: var(--boxshadow);box-sizing: border-box;} 
    
            /* 1 level */
                li.menu-level-1 {list-style-type: none;margin-right: 40px !important;transition: 1s;display: inline-block;}
                li.menu-level-1 > a {line-height: var(--header-height);font-weight: 500;display: block;}
                /* hover-active-decoration */
                    li.menu-level-1.active > a, li.menu-level-1 > a:hover {color: var(--color-red);}
               
                 /* parent */
                    li.menu-level-1.parent > a:after{width: 6px;height: 6px;background: url(/assets/images/icons/arrow_down_white.png) 50% 50%/100% no-repeat;top: 50%;right: -15px;transform:translateY(-50%);position: absolute;content: '';display: block;transition:.35s;}
                    li.menu-level-1.parent:hover > a:after {transform: translateY(-50%) rotate(180deg);}
                    
                    li.menu-level-1.parent.active > a:after, li.menu-level-1.parent > a:hover:after {filter: brightness(0) saturate(100%) invert(44%) sepia(83%) saturate(4866%) hue-rotate(344deg) brightness(100%) contrast(82%);}
               
            /* 2 level  ---------------------- */
                li.menu-level-2 > a,
                li.menu-level-3 > a, li.menu-level-4 > a {color: #fff;font-size: .95em;line-height: 23px;font-weight: 400;padding: 10px !important;display: block;border-bottom: 1px solid var(--grey);}

                li.menu-level-2.active > a, li.menu-level-2:hover > a,
                li.menu-level-3.active > a, li.menu-level-3:hover > a,
                li.menu-level-4.active > a, li.menu-level-4:hover > a {background: var(--grey);}
                /* parent */
                    li.menu-level-2.parent > a {padding-right: 25px;}
                    li.menu-level-2.parent > a:after{width: 8px;height: 8px;background: url(/assets/images/icons/arrow_right_black.png) 50% 50%/100% no-repeat;top: 50%;right: 10px;transform:translateY(-50%);position: absolute;content: '';display: block;transition:.5s}
                    
            /* 3 level  ---------------------- */
                /* parent  ---------------------- */
                    li.menu-level-3.parent > a {padding-right: 25px;}
                    li.menu-level-2.parent > a:after{width: 8px;height: 8px;background: url(/assets/images/icons/arrow_right_black.png) 50% 50%/100% no-repeat;top: 50%;right: 10px;transform:translateY(-50%);position: absolute;content: '';display: block;transition:.5s}
                    
        /* BEHAVIOR  ---------------------- */
            /* common  ---------------------- */
                ul.desktop-mainmenu li {position: relative}ul.desktop-mainmenu a {position: relative}
            /* 2 level  ---------------------- */
                li.menu-level-1 > ul.submenu {top: calc(100% + 20px);left: 0;z-index: 2;position: absolute;transition: .35s;opacity: 0;visibility: hidden;z-index: 10;}
                li.menu-level-1.parent:hover > ul.submenu {top: 100%;opacity: 1;display: block;visibility: visible}
                
            /* 3 level  ---------------------- */
                li.menu-level-2 > ul.submenu  {top: -20px;left: 100%;text-align: left;position: absolute;transition: .35s;box-shadow:20px 0px 30px rgb(0 0 0 / 28%);opacity: 0;visibility: hidden;z-index: 1;min-height: 100%;}
                li.menu-level-2.parent:hover > ul.submenu  {top: 0;opacity: 1;visibility: visible;z-index: 3}

                  
.google-reviews{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.google-reviews-head{display:flex;flex-basis:100%;align-items:center;gap:10px;padding: 0 0 12px 0}
.google-review{padding:20px;flex-basis:19%;border-radius:20px;box-sizing:border-box;background:#ebdfc9;border:0}
.grh-title{font-weight: 600;color: var(--maincolor2);font-size: 3rem;}
.grh-rating{font-weight:600;color:#222}
.grh-count{color:#222}
.gr-powered, .grh-link{display:none}
.gr-avatar img{width:40px;height:40px;border-radius:50%;margin-bottom: 5px;display:block}
.gr-author,.gr-author a{font-weight:600;color:#222;text-decoration:none}
.gr-author a:hover{text-decoration:underline}
.gr-stars{font-size:14px;line-height:1;color:#fbbc04;letter-spacing:.5px}
.gr-meta{font-size:12px;color:#5f6368;margin-top:2px}
.gr-text{font-size: 16px;line-height: 24px;color: #202124;margin-top: 6px;}

.owl-reviews .owl-stage {display: flex;display: -webkit-flex;}
.owl-reviews .owl-item {display: flex;flex: 1 0 auto;}


/* ============================================================ */
/*                         ANIMATIONS                           */
/* ============================================================ */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(231,76,60,0.3); }
    50% { box-shadow: 0 0 40px rgba(231,76,60,0.6); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes slideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInScale {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes drawSegment {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-slide-left { animation: slideInLeft 0.8s ease both; }
.animate-slide-right { animation: slideInRight 0.8s ease both; }
.animate-slide-up { animation: slideInUp 0.8s ease both; }
.animate-fade-up { animation: fadeInUp 0.6s ease both; }
.animate-fade-scale { animation: fadeInScale 0.7s ease both; }


/* ============================================================ */
/*                      COMPONENT CLASSES                       */
/* ============================================================ */
#workemail {display: none;}
/* Glass Card */
.glass-card {
    background: rgba(31, 31, 31, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
#hero .animate-slide-right {max-width: 80%;}
/* Gradient Text */
.text-gradient {
    background: linear-gradient(to right, #FEAA0A, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brand Gradient Background */
.bg-gradient-brand {
    background: linear-gradient(135deg, #FEAA0A 0%, #FE4708 100%);
}

/* Pulse glow */
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Dot grid pattern overlay */
.dot-pattern {
    position: relative;
}
.dot-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.03;
    background-image: radial-gradient(#e74c3c 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}


/* ============================================================ */
/*                    DECORATIVE GLOW ELEMENTS                  */
/* ============================================================ */
.deco-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /*overflow: hidden;*/
    pointer-events: none;
}
.deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
    opacity: .8;
}
.deco-sm  { width: 200px; height: 200px; }
.deco-md  { width: 384px; height: 384px; }
.deco-lg  { width: 576px; height: 576px; }
.deco-xl  { width: 768px; height: 768px; }

.deco--red    { background: rgba(231,76,60,0.2); }
.deco--red-10 { background: rgba(231,76,60,0.1); }
.deco--red-15 { background: rgba(231,76,60,0.15); }
.deco--orange { background: rgba(254,71,8,0.15); }
.deco--yellow { background: rgba(254,170,10,0.15); }
.deco--yellow-10 { background: rgba(254,170,10,0.1); }
.deco--green  { background: rgba(34,197,94,0.1); }

.deco--tl  { top: 25%; left: 25%; }
.deco--tr  { top: 25%; right: 25%; }
.deco--tr0 { top: 0; right: 0; }
.deco--br  { bottom: 25%; right: 25%; }
.deco--bl  { bottom: 25%; left: 25%; }
.deco--tl0 { top: 0; left: 0; }
.deco--br0 { bottom: 0; right: 0; }


/* ============================================================ */
/*                           BADGE                              */
/* ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    font-size: 14px;
    font-weight: 600;
}
.badge--red    { border: 1px solid rgba(231,76,60,0.3); color: var(--color-red); }
.badge--orange { border: 1px solid rgba(254,71,8,0.3);  color: var(--color-orange); }
.badge--yellow { border: 1px solid rgba(254,170,10,0.3); color: var(--color-yellow); }
.badge--green  { border: 1px solid rgba(34,197,94,0.3);  color: #22c55e; }
.badge--white  { border: 1px solid rgba(255,255,255,0.2); color: #fff; }

.badge-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

.badge-hit {
    background: var(--gradient-brand);
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================ */
/*                          BUTTONS                             */
/* ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-xl);
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.btn-sm { padding: 10px 20px; font-size: 14px; border-radius: var(--radius-md); }
.btn-lg { padding: 18px 40px; font-size: 18px; border-radius: 14px; }
.btn-full { width: 100%; }

.btn-primary {
    background: var(--gradient-brand);
    color: white;
}
.btn-primary:hover {
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
    color: white;
}

.btn-outline {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
}
.btn-outline:hover {
    background: rgba(255,255,255,0.05);
    color: white;
}

.btn-red {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.btn-red:hover {
    box-shadow: 0 0 20px rgba(231,76,60,0.5);
    transform: translateY(-2px);
    color: white;
}

.btn-yellow {
    background: linear-gradient(135deg, #FEAA0A, #ca8a04);
    color: #000;
}
.btn-yellow:hover {
    box-shadow: 0 0 20px rgba(254,170,10,0.5);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--color-dark);
    border: 1px solid rgba(231,76,60,0.5);
    color: white;
}
.btn-dark:hover {
    background: var(--color-red);
    color: white;
}

.btn-cta {
    background: var(--gradient-brand);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    display: inline-block;
}
.btn-cta:hover {
    box-shadow: 0 0 20px rgba(254,71,8,0.4);
    transform: translateY(-1px);
}

/* ============================================================ */
/*   стили таможенного калькулятора             */
/* ============================================================ */
/* Обёртка калькулятора */
#j4k-calc {
    width: 100%;
    margin: 5px auto;
}
 
/* Панели (форма и результат) */
.j4k-panel {
    border: 1px solid rgba(255, 0, 0, 0.25);
    min-height: 300px;
    padding: 20px;
    box-sizing: border-box;
}
 
.j4k-panel h2 {
    margin-bottom: 16px;
}
 
/* Строки и колонки (нужны JS-хукам) */
.j4k_row {
    width: 100%;
    margin-bottom: 12px;
}
 
.j4k_col,
.j4k_col1 {
    margin-bottom: 12px;
}
 
/* Первый label в колонке — заголовок поля */
.j4k_col > label:first-child,
.j4k_col1 > label:first-child {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}
 
/* Группа радиокнопок / лейблов (раскладка) */
.j4k-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
 
/* Лейбл после radio/checkbox — вертикальное выравнивание */
.j4k-options label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    font-weight: 400;
}
 
/* Состояние ошибки для инпутов (используется в calc.js) */
.form-control.j4k-input--error {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: var(--color-red);
}
 
/* Кнопка расчёта */
.j4k_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: var(--gradient-brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-xl);
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}
 
.j4k_btn:hover {
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}
 
/* Блок результатов */
#j4k-result {
    padding: 20px;
}
 
.j4k-result-list {
    margin-bottom: 16px;
}
 
.j4k-result-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
    padding: 8px 0;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-muted);
}
 
.j4k-result-row span:last-child {
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text);
}
 
.j4k-result-row a {
    color: var(--color-orange);
    text-decoration: none;
}
.j4k-result-row a:hover {
    text-decoration: underline;
}
 
/* Итого */
.j4k-result-total {
    font-size: 16px;
    font-weight: 600;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 8px;
    color: var(--color-text);
}
 
/* Сноска */
.j4k-result-note {
    padding: 10px;
    font-size: 0.85em;
    color: var(--color-text-dim);
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
 
/* Скрытый блок валют */
#currencies {
    display: none;
}
.icon-box--red {display: flex;align-items: center;justify-content: center;}

#about .glass-card .icon-circle {width:80px;height:80px;font-size:32px;margin: 0 auto;}
#mission .glass-card .icon-circle {width:80px;height:80px;font-size:32px;}
#stats .icon-number {width:96px;height:96px;margin: 0 auto;}
.margin0auto, .m0a {margin: 0 auto;}
#regions .icon-circle {width:64px;height:64px;font-size:24px;margin: 0 auto;}
#regions .last-icon-circle {width:48px;height:48px;font-size:20px; margin: 0;}

#advantages .icon-box--red, #cars .icon-box--red {width:64px;height:64px;font-size:28px;}

.brand-tag {margin-right: 20px;}
.brand-tag img {width: 80px;height: 80px;object-fit: contain;display: block;margin: 0 auto 20px;}
#stats {overflow: visible !important;}

#workflow .workflow-connector {top: 35px;}

#hero.hero .messenger-btn {gap: 8px;padding: 5px;}

#hero.hero .btn-flex {padding: 18px 7px;width: 100%;box-sizing: border-box;}
.header-socials .icon-circle--md {width: 40px;height: 40px;margin-right: 8px;font-size: 18px;}
.header-socials .icon-circle--md > img {width: 23px;border-radius: 100px;}

/* ============================================================ */
/*                      ICON CIRCLES / BOXES                    */
/* ============================================================ */
.icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-circle--sm  { width: 40px; height: 40px; font-size: 16px; }
.icon-circle--md  { width: 48px; height: 48px; font-size: 20px; }
.icon-circle--lg  { width: 56px; height: 56px; font-size: 24px; }
.icon-circle--xl  { width: 64px; height: 64px; font-size: 28px; }
.icon-circle--2xl { width: 80px; height: 80px; font-size: 32px; }
.icon-circle > .max-icon {width: 27px;}
.icon-box {
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-box--sm  { width: 40px; height: 40px; font-size: 16px; }
.icon-box--md  { width: 48px; height: 48px; font-size: 20px; }
.icon-box--lg  { width: 56px; height: 56px; font-size: 24px; }
.icon-box--xl  { width: 64px; height: 64px; font-size: 28px; }
.icon-box--2xl { width: 80px; height: 80px; font-size: 32px; }

.icon--red    { background: rgba(231,76,60,0.2);  color: var(--color-red); }
.icon--orange { background: rgba(254,71,8,0.2);   color: var(--color-orange); }
.icon--yellow { background: rgba(254,170,10,0.2); color: var(--color-yellow); }
.icon--green  { background: rgba(34,197,94,0.2);  color: #22c55e; }
.icon--blue   { background: rgba(59,130,246,0.2); color: #3b82f6; }
.icon--purple { background: rgba(168,85,247,0.2); color: #a855f7; }

.icon-gradient {
    background: var(--gradient-brand);
    color: white;
}


/* ============================================================ */
/*                        SECTION LAYOUT                        */
/* ============================================================ */
.section {
    position: relative;
    /*overflow: hidden;*/
}
.section--dark    { background-color: var(--color-dark); }
.section--darker  { background-color: var(--color-darker); }

.section-py    { padding-top: 96px;  padding-bottom: 96px; }
.section-py-sm { padding-top: 48px;  padding-bottom: 48px; }
.section-py-lg { padding-top: 128px; padding-bottom: 128px; }
.section-calculator-wrap {padding: 130px 0 0 0;}

.section-border-t { border-top:    1px solid var(--color-border); }
.section-border-b { border-bottom: 1px solid var(--color-border); }
.section-border-y {
    border-top:    1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Section content above decorative elements */
.section-content {
    position: relative;
    z-index: 1;
}


/* ============================================================ */
/*                       SECTION HEADING                        */
/* ============================================================ */
.section-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 64px;
}

.section-head-calculator {margin: 0 auto;}
.section-head--left { text-align: left; margin-left: 0; }

.section-head .badge { margin-bottom: 24px; }

.section-head h2 {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.15;
    color: white;
}

.text-in-content {color: var(--color-text-muted); font-weight: 300;line-height: 1.6;}
.text-in-content p {margin-bottom: 12px;}
.text-in-content h2, .text-in-content .h2 {font-size: clamp(24px, 4vw, 32px);font-weight: 900;margin-bottom: 16px;line-height: 1.15;color: white;}

/* faq */
.question {padding: 15px 40px 15px 0;position: relative;border-bottom: 1px solid #3c3c3c;cursor:pointer;transition:border-color .5s;z-index:2;}
.question:after {position: absolute;content: "";right: 0;top: 30px;text-align: center;background: url(/assets/images/icons/arrow_down_white.png)  50% 50% no-repeat;width: 12px;height: 12px;background-size: 12px 12px;line-height: 12px;border-radius: 0;transition: .5s;}
.answer {padding: 0;border-top:0;margin-bottom: 0;display:none;line-height: 26px;z-index:2;}
.question.open:after {transform: rotate(180deg);}


#breadcrumbs {/* margin-top: 90px; */z-index: 2;position: absolute;top: 90px;left: 50%;transform: translateX(-50%);}

.section-head p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-muted);
}


/* ============================================================ */
/*                           HERO                               */
/* ============================================================ */
.hero {
    position: relative;
    /*overflow: hidden;*/
}
.hero--full { min-height: 90vh; display: flex; align-items: center; }
.hero--400  { min-height: 400px;margin-top: 80px; display: flex; align-items: center; }
.hero--500  { min-height: 500px;margin-top: 80px; display: flex; align-items: center; }
.hero--600  { min-height: 600px;margin-top: 80px; display: flex; align-items: center; }
.hero--700  { min-height: 700px;margin-top: 80px; display: flex; align-items: center; }
.hero--800  { min-height: 800px;margin-top: 80px; display: flex; align-items: center; }

.hero__content { position: relative; z-index: 2; }
.hero__img     { position: relative; z-index: 1; }

.hero__title {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: white;
    margin-bottom: 24px;
}

.hero__title_small {
    font-size: clamp(36px, 6vw, 60px);
}

.hero__text {
    font-size: 18px;
    color: #d1d5db;
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 40px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.hero__stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero__stat-item i { color: var(--color-red); }

/* Hero background overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-overlay-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--color-darker) 40%, rgba(10,10,10,0.5) 100%);
}
.hero-overlay-grad-car {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, #0a0a0a 30%, rgb(10 10 10 / 0%) 100%);
}
.hero-bg-img {
    position: absolute;
    right: 0; top: 0;
    width: 66.66%;
    height: 100%;
    z-index: 0;
    opacity: 0.4;
}
.hero-bg-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-pt { padding-top: 80px; padding-bottom: 80px; }
.hero-pt-sm { padding-top: 100px; padding-bottom: 60px; }

.prigon-avto-page .hero-bg-img {width: 100%;opacity: 1;position: relative;}
.prigon-avto-page .hero-bg-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
/*.prigon-avto-page .hero-bg-img img {width: 100%;height: 100%;object-fit: cover;object-position: -22% 100%;}*/

/* ============================================================ */
/*                           CARDS                              */
/* ============================================================ */
.card {
    border-radius: var(--radius-3xl);
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}
.card:hover {
    border-color: rgba(231,76,60,0.5);
    box-shadow: 0 0 40px rgba(231,76,60,0.2);
    transform: translateY(-4px);
}
.card--yellow-hover:hover {
    border-color: rgba(254,170,10,0.5);
    box-shadow: 0 0 40px rgba(254,170,10,0.2);
}
.card--green-hover:hover {
    border-color: rgba(34,197,94,0.5);
    box-shadow: 0 0 40px rgba(34,197,94,0.2);
}
.card--active {
    border-color: var(--color-red);
    box-shadow: 0 0 30px rgba(231,76,60,0.3);
}

/* Card with glow on hover — via overlay div */
.card-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    transition: transform 0.5s;
    z-index: 0;
}
.card:hover .card-glow-tl { transform: scale(1.5); }
.card:hover .card-glow-br { transform: scale(1.5); }

.card-glow--red    { background: rgba(231,76,60,0.1); }
.card-glow--yellow { background: rgba(254,170,10,0.1); }
.card-glow--blue   { background: rgba(59,130,246,0.1); }

.card-glow-tl { top: 0; right: 0; width: 192px; height: 192px; }
.card-glow-br { bottom: 0; left: 0;  width: 192px; height: 192px; }


/* ============================================================ */
/*                      STATS SECTION                           */
/* ============================================================ */
.stat-item { text-align: center; }
.stat-value {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 900;
    color: var(--color-red);
    line-height: 1;
}
.stat-label {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.stat-divider {
    width: 1px; height: 48px;
    background: rgba(255,255,255,0.1);
    align-self: center;
}

.big-stat { text-align: center; }
.big-stat__value {
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 900;
}


/* ============================================================ */
/*                       PROCESS STEPS                          */
/* ============================================================ */
.step-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--gradient-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 18px;
    flex-shrink: 0;
}

.step-number--lg {
    width: 64px; height: 64px;
    font-size: 24px;
}

.step-line {
    position: absolute;
    left: 24px; top: 48px; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(231,76,60, 0.5), transparent);
}

/* Numbered step in a grid (for horizontal layouts) */
.step-grid-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 20px;
    margin: 0 auto 16px;
}


/* ============================================================ */
/*                      CONTACT FORM                            */
/* ============================================================ */
.form-group { margin-bottom: 24px; }

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 8px;
}
.form-label .required { color: var(--color-red); }

.form-control {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--color-darker);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-control::placeholder { color: #4b5563; }
.form-control:focus { border-color: var(--color-red); }

textarea.form-control {
    resize: none;
    min-height: 120px;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14l-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-hint {
    font-size: 12px;
    color: #4b5563;
    margin-top: 6px;
}
.form-note {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 12px;
}



/* Radio Card */
.radio-card { flex: 1; min-width: 180px; }
.radio-card input[type="radio"] { display: none; }
.radio-card label {
    display: block;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(255,255,255,0.1);
    background: var(--color-dark);
    cursor: pointer;
    transition: all 0.2s;
}
.radio-card label:hover { border-color: rgba(231,76,60,0.4); }
.radio-card input[type="radio"]:checked + label {
    border-color: var(--color-red);
    background: rgba(231,76,60,0.1);
}
.radio-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.radio-dot::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}
.radio-card input[type="radio"]:checked + label .radio-dot::after {
    background: var(--color-red);
}

/* Checkbox */
.checkbox-card label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    padding: 20px;
    border-radius: var(--radius-xl);
    background: rgba(31,31,31,0.6);
    border: 1px solid rgba(231,76,60,0.3);
}
.checkbox-custom {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    background: var(--color-dark);
    cursor: pointer;
    appearance: none;
    flex-shrink: 0;
    margin-top: 4px;
    transition: all 0.2s;
}
.checkbox-custom:checked {
    background-color: var(--color-red);
    border-color: var(--color-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

#calculator label {display: flex;}
#calculator label > span:last-child {margin-left: 12px;}
#calculator .itogo_number {font-size:2.3rem;font-weight:700;color:#fff;}

/* ============================================================ */
/*                        TABLE STYLES                          */
/* ============================================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    padding: 16px 20px;
    background: rgba(31,31,31,0.8);
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.08);
}
.data-table td {
    padding: 14px 20px;
    color: #d1d5db;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.05);
}
.data-table tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
}
.table-wrapper {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}


/* ============================================================ */
/*                       PRICING CARDS                          */
/* ============================================================ */
.pricing-card {
    border-radius: var(--radius-3xl);
    padding: 32px;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
}
.pricing-card:hover {
    border-color: rgba(231,76,60,0.5);
    box-shadow: 0 0 40px rgba(231,76,60,0.2);
    transform: translateY(-4px);
}
.pricing-card--featured {
    border: 2px solid var(--color-orange);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(254,71,8,0.3);
}
.pricing-card--featured:hover { transform: scale(1.02) translateY(-4px); }

.pricing-price {
    font-size: 48px;
    font-weight: 900;
    color: var(--color-orange);
    line-height: 1;
}
.pricing-price--red { color: var(--color-red); }
.pricing-price--yellow  { color: var(--color-yellow); }
.pricing-currency, .pricing-period {
    font-size: 16px;
    color: var(--color-text-muted);
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #d1d5db;
    margin-bottom: 8px;
}
.pricing-feature i { color: var(--color-red); flex-shrink: 0; margin-top: 2px; }
.pricing-feature--yellow i { color: var(--color-yellow); }


/* ============================================================ */
/*                     MESSENGER / SOCIAL BUTTONS               */
/* ============================================================ */
.messenger-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.messenger-grid.short {
    grid-template-columns: repeat(3, 1fr);
}
.messenger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: var(--color-darker);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    transition: all 0.3s;
}
.messenger-btn span { color: white; font-size: 14px; font-weight: 600; }

.messenger-btn--wa:hover { border-color: rgba(34,197,94,0.5);  background: rgba(34,197,94,0.1); }
.messenger-btn--tg:hover { border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.1); }
.messenger-btn--vb:hover { border-color: rgba(168,85,247,0.5); background: rgba(168,85,247,0.1); }
.messenger-btn--em:hover { border-color: rgba(231,76,60,0.5);  background: rgba(231,76,60,0.1); }

.social-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.3s;
}
.social-btn:hover { background: var(--color-red); color: white; }

.social-btn-lg {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    transition: transform 0.3s;
}
.social-btn-lg:hover { transform: scale(1.1); }

.social-btn-lg--ig { background: rgba(168,85,247,0.2); color: #c084fc; }
.social-btn-lg--yt { background: rgba(255,0,0,0.2);    color: #ef4444; }
.social-btn-lg--tt { background: rgba(206,206,206,0.2); color: #d1d5db; }


/* ============================================================ */
/*                        BLOG CARDS                            */
/* ============================================================ */
#blog-grid .flex > div:first-child {display: none;}
.blog-card {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    animation: fadeInUp 0.5s ease both;
}
.blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(231,76,60,0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.blog-card__img {
    overflow: hidden;
    background: var(--color-gray);
}
.blog-card__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body { padding: 24px; }
.blog-card__cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.blog-card__cat--red    { background: rgba(231,76,60,0.2);  color: var(--color-red); }
.blog-card__cat--orange { background: rgba(254,71,8,0.2);   color: var(--color-orange); }
.blog-card__cat--yellow { background: rgba(254,170,10,0.2); color: var(--color-yellow); }
.blog-card__cat--green  { background: rgba(34,197,94,0.2);  color: #22c55e; }
.blog-card__cat--blue   { background: rgba(59,130,246,0.2); color: #3b82f6; }
.blog-card__cat--purple { background: rgba(168,85,247,0.2); color: #a855f7; }

.blog-card__title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.2s;
}
.blog-card:hover .blog-card__title { color: var(--color-orange); }
.blog-card__text {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}
.blog-card__meta {
    font-size: 12px;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 16px;
}
.blog-card__meta i { color: var(--color-red); }


/* ============================================================ */
/*                        VIDEO CARDS                           */
/* ============================================================ */
.video-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s;
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
}
.video-card:hover {
    border-color: rgba(231,76,60,0.5);
    box-shadow: 0 0 30px rgba(231,76,60,0.3);
}
.video-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--color-gray);
}
.video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    transition: background 0.3s;
}
.video-play i { font-size: 40px; color: rgba(255,255,255,0.9); transition: transform 0.3s; }
.video-card:hover .video-play { background: rgba(231,76,60,0.3); }
.video-card:hover .video-play i { transform: scale(1.1); }
.video-card__body { padding: 16px; }
.video-card__cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-orange);
    margin-bottom: 8px;
}
.video-card__title {
    font-size: 15px;
    font-weight: 700;
    color: white;
    line-height: 1.4;
    transition: color 0.2s;
}
.video-card:hover .video-card__title { color: var(--color-orange); }


/* ============================================================ */
/*                        BRAND TAGS                            */
/* ============================================================ */

.brand-tag:hover { border-color: rgba(231,76,60,0.5); color: var(--color-orange); }

.brand-logo {
    background: rgba(31,31,31,0.8);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-xl);
    padding: 16px 24px;
    text-align: center;
    transition: all 0.3s;
    color: white;
    font-size: 14px;
    font-weight: 600;
}
.brand-logo:hover { border-color: rgba(231,76,60,0.3); }


/* ============================================================ */
/*                        MAP SECTION                           */
/* ============================================================ */
.map-wrapper {
    border-radius: var(--radius-3xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 40px rgba(0,0,0,0.5);
    position: relative;
}
.map-wrapper iframe {
    display: block;
    width: 100%;
    aspect-ratio: 21/9;
    border: none;
}

.map-label {
    position: absolute;
    top: 24px; left: 24px;
    background: rgba(31,31,31,0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 16px 24px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}


/* ============================================================ */
/*                        FAQ SECTION                           */
/* ============================================================ */
.faq-card {
    border-radius: var(--radius-xl);
    padding: 24px;
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.3s;
}
.faq-card:hover { border-color: rgba(231,76,60,0.5); }
.faq-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.faq-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.7;
}


/* ============================================================ */
/*                       LEGAL INFO                             */
/* ============================================================ */
.legal-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.legal-value {
    font-weight: 600;
    font-size: 18px;
    color: white;
    margin-bottom: 24px;
}
#hero__content__homepage-right {top: -100px;position: absolute;}
.por {position: relative;}
/* ============================================================ */
/*                       CALCULATOR                             */
/* ============================================================ */
.calc-result-card {
    border-radius: var(--radius-3xl);
    padding: 32px;
    border: 2px solid var(--color-red);
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    animation: pulse-glow 2s ease-in-out infinite;
    /*position: sticky;
    top: 96px;*/
}
.calc-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.calc-line__label { color: var(--color-text-muted); font-size: 14px; }
.calc-line__value { color: white; font-weight: 700; font-size: 16px; }
.calc-total {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: white;
}


/* ============================================================ */
/*                      SITE HEADER / NAV                       */
/* ============================================================ */

.site-header {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 50;
    background: rgba(31, 31, 31, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s, box-shadow 0.3s;

}
.site-header.is-scrolled {
    background: rgba(10,10,10,0.95);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.site-header__inner { height: 80px; }


.logo__icon {
    margin-right: 10px;
}
.logo__text {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: white;
}
.logo__text span { color: var(--color-orange); }

.header-contacts {
    display: flex;
    align-items: center;
    gap: 24px;
}
.header-phone { text-align: right; }
.header-phone a {
    display: block;
    white-space: nowrap;
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s;
}
.header-phone a:hover { color: var(--color-orange); }
.header-phone span { display: block; font-size: 12px; color: #6b7280; }

/* ============================================================ */
/*                          FOOTER                              */
/* ============================================================ */
.site-footer {
    position: relative;
    background: #050505;
    padding: 64px 0 32px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-brand p, .footer-brand .planblogo {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 24px;
}
.footer-brand .logo > img {width: 80px;}
.footer-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 12px; margin-left: 0; list-style: none; }
.footer-links a {
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--color-orange); }

.footer-contacts { list-style: none; margin: 0; padding: 0; }
.footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    margin-left: 0;
    list-style: none;
}
.footer-contacts li i { color: var(--color-orange); margin-top: 2px; flex-shrink: 0; }
.footer-contacts a {
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-contacts a:hover { color: white; }
.footer-contacts span  { color: var(--color-text-muted); font-size: 14px; }

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.footer-bottom p { color: #4b5563; font-size: 12px; margin: 0; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a {
    color: #4b5563;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-bottom-links a:hover { color: white; }


/* ============================================================ */
/*                   TEXT / TYPOGRAPHY HELPERS                  */
/* ============================================================ */
.text-white   { color: #fff !important; }
.text-red     { color: var(--color-red) !important; }
.text-orange  { color: var(--color-orange) !important; }
.text-yellow  { color: var(--color-yellow) !important; }
.text-green   { color: #22c55e !important; }
.text-blue    { color: #3b82f6 !important; }
.text-purple  { color: #a855f7 !important; }
.text-muted   { color: var(--color-text-muted) !important; }
.text-dim     { color: var(--color-text-dim) !important; }

.text-xs  { font-size: 12px !important; }
.text-sm  { font-size: 14px !important; }
.text-md  { font-size: 16px !important; }
.text-lg  { font-size: 18px !important; }
.text-xl  { font-size: 20px !important; }
.text-2xl { font-size: 24px !important; }
.text-3xl { font-size: 30px !important; }
.text-4xl { font-size: 36px !important; }
.text-5xl { font-size: 48px !important; }
.text-6xl { font-size: 60px !important; }

.lh-tight  { line-height: 1.2 !important; }
.lh-normal { line-height: 1.5 !important; }
.lh-loose  { line-height: 1.7 !important; }

/* Background helpers */
.bg-dark   { background-color: var(--color-dark) !important; }
.bg-darker { background-color: var(--color-darker) !important; }
.bg-gray   { background-color: var(--color-gray) !important; }

/* Gap helpers (supplement flex-grid) */
.gap5  { gap: 5px !important; }
.gap8  { gap: 8px !important; }
.gap10 { gap: 10px !important; }
.gap12 { gap: 12px !important; }
.gap16 { gap: 16px !important; }
.gap20 { gap: 20px !important; }
.gap24 { gap: 24px !important; }
.gap30 { gap: 30px !important; }
.gap32 { gap: 32px !important; }
.gap40 { gap: 40px !important; }
.gap48 { gap: 48px !important; }

/* Border helpers */
.border-red-30  { border-color: rgba(231,76,60,0.3) !important; }
.border-red-50  { border-color: rgba(231,76,60,0.5) !important; }
.border-yellow-30 { border-color: rgba(254,170,10,0.3) !important; }
.border-white-5  { border-color: rgba(255,255,255,0.05) !important; }
.border-white-10 { border-color: rgba(255,255,255,0.1) !important; }
.border-green-40 { border-color: rgba(34,197,94,0.4) !important; }

/* Size helpers */
.w8  { width: 8px !important; }
.w10 { width: 10px !important; }
.h8  { height: 8px !important; }

.min-h-full { min-height: 100%; }
.sub-page.title-section {text-align: center;max-width: 900px;margin: 120px auto 30px;}

.glass-card-map {aspect-ratio:21/9;position:relative;min-height:400px}
/* ============================================================ */
/*                     RESPONSIVE                               */
/* ============================================================ */
@media all and (min-width: 768px) {
    .nav-menu       { display: flex; }
    .header-contacts { display: flex; }
    .nav-toggle      { display: none; }
}

@media all and (max-width: 1440px) {
    .section-py { padding-top: 80px; padding-bottom: 80px; }
    li.menu-level-1 {margin-right: 12px !important;}
    .header-socials .icon-circle--md {width: 34px;height: 34px;margin-right: 6px;}
}

@media all and (max-width: 1221px) {
    /* mobile menu  ---------------------- */ 
        #header #mainmenu {border: none;margin-left: 0;left: auto;top: auto;height: 100%;transform: none;position: initial;}
        #mainmenu .desktop-mainmenu, #mainmenu .catalog-menu-button {display: none !important;}

    /* button  ---------------------- */  
        .mobile-mainmenu-button {display: block;width: 30px;transition: .5s;z-index: 95;cursor: pointer;}
        .mobile-mainmenu-button img {width: 100% !important;}
    
    /* wrapper  ---------------------- */  
        .mobile-mainmenu-outer {display: block;position: fixed;overflow-y: auto; top: 0;bottom: 0;width: 290px;height: 100vh;background: var(--color-darker);z-index: 9999;left: -330px;transition: .5s;}
        .mobile-mainmenu-active .mobile-mainmenu-outer {left: 0;}
            /* close  ---------------------- */  
                .mobile-mainmenu-close {width: 18px;filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(18%) hue-rotate(26deg) brightness(107%) contrast(101%);padding: 10px; right: 0px;top: 0;cursor:  pointer;position: absolute;}
            	.mobile-mainmenu-close img {width: 100%}
            	.mobile-mainmenu-close:hover {transform:rotate(180deg); transition: .7s;}
            /* top block  ---------------------- */  
                .mobile-mainmenu-topBlock {margin-bottom: 30px;text-align: center;display: block;position: relative;}
            	.mobile-mainmenu-topBlock .logo_m {margin: 45px auto 25px; display: block;}
            	.mobile-mainmenu-topBlock a.tel_m {font-weight: 700;color: #fff;display: block;margin-bottom: 0;text-decoration: none;}
            	.mobile-mainmenu-topBlock .adres_m {text-decoration: none;padding: 0 15px;color: #222;display: block;}
            	.mobile-mainmenu-topBlock .socials-url > img {width: 30px;}
            	.mobile-mainmenu-topBlock .address_m > img {width: 25px;transform: translateY(-3px);}
                .mobile-mainmenu-topBlock .logo_m img {width: 100px;margin: 0 auto;}
            /* common */
                .mobile-mainmenu ul {margin: 0;}
                .mobile-mainmenu li {border-bottom: 1px solid #48484891;margin: 0;list-style: none;}
                .mobile-mainmenu li:last-child {border: none;}
                .mobile-mainmenu li a {color: #fff;padding: 12px 20px;font-size: 14px;line-height: 20px;text-decoration: none;display: block;}
                .mobile-mainmenu li.active > a {color: var(--color-red);font-weight: 600;}
                
                /* parent */
                .mobile-mainmenu li.parent {position: relative;}
                .mobile-mainmenu li.parent > a {padding-right: 40px;}
                
                .submenu-toggle {position: absolute;right: 0;top: 0;width: 44px;height: 44px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
                .submenu-toggle::after {width: 12px;height: 12px;filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(18%) hue-rotate(26deg) brightness(107%) contrast(101%);background: url(/assets/images/icons/plus_black.png) 50% 50%/100% no-repeat;display: block;content: '';}
                .submenu-toggle.opened::after {background-image: url(/assets/images/icons/minus_black.png);}

                /* submenu */
                .mobile-submenu {padding-left: 10px;}
        #footer .logo img {width: 100px;}
}

@media all and (max-width: 992px) {
    .hero__title, .hero__title_small { font-size: clamp(28px, 5vw, 54px); }
    .section-py  { padding-top: 64px; padding-bottom: 64px; }
    .section-head h2 { font-size: 32px; }
    .pricing-card--featured { transform: none; }
}

@media all and (max-width: 768px) {
    .hero--full { min-height: 100dvh; }
    .hero--600, .hero--700, .hero--800 {min-height: 100%;margin-top: 100px;margin-bottom: 30px;}
    .hero--400, .hero--500, #hero-about.hero--800{ min-height: 200px; }
    .btn-lg { padding: 14px 24px; font-size: 16px; }
    .messenger-grid { grid-template-columns: repeat(2, 1fr); }
    .map-wrapper iframe { aspect-ratio: 4/3; }
    .section-head  { margin-bottom: 40px; }
    .calc-result-card { position: static; }
    .hero-bg-img { display: none; }
    .prigon-avto-page .hero-bg-img {display: block;}
    /*#hero {margin-top: 85px;}*/
    .hero-overlay-grad { background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0.7)); }
    .hystmodal__close {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E") !important;background-size: 100% 100%;}
    .glass-card-map {
        aspect-ratio: 4/3 !important;
        min-height: 300px !important;
        width: 100% !important;
        overflow: hidden;
    }
}

@media all and (max-width: 576px) {
    .text-md  { font-size: 15px !important; }
    .text-lg  { font-size: 16px !important; }
    .text-xl  { font-size: 18px !important; }
    .text-2xl { font-size: 21px !important; }
    .text-3xl { font-size: 25px !important; }
    .text-4xl { font-size: 30px !important; }
    .text-5xl { font-size: 40px !important; }

    .hero__actions { flex-direction: column; }
    .hero__text {font-size: 16px;line-height: 1.5;}
    #calculator .itogo_number {font-size:1.6rem;}
    .hero-float-1 {left: -10px;}
    .hero__content__homepage  .hero__title, .hero__content__homepage  .hero__title_small {
        font-size: clamp(34px, 5vw, 54px);
    }
    .section-calculator-wrap {padding: 85px 0 30px;}

    .hero__content__homepage 
    {min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        padding-top: 40px;
        padding-bottom: 40px;}
        
    .hero-scroll-hint {
        text-align: center;
        color: rgba(255,255,255,0.5);
        font-size: 22px;
        animation: bounceDown 1.5s infinite;
    }
    
    

    @keyframes bounceDown {
        0%, 100% { transform: translateY(0); opacity: 0.5; }
        50% { transform: translateY(8px); opacity: 1; }
    }
    
    .hero__actions .btn { width: 100%; }
    .badge { font-size: 12px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .pricing-card--featured { transform: none; }
    .hero-float-1 {top: 40%;}
    .section-py  {padding-top: 40px;padding-bottom: 40px;}
    .yt-cta .df, #calculator .form-group > .df, #cost .fg1 > div, .glass-card-last-mob > div, .df-mob {flex-direction: column;}
    .hero-pt {padding-top: 40px;padding-bottom: 40px;}
    .step-circle {width: 48px;height: 48px;font-size: 16px;}
    .blog-card__img {aspect-ratio: auto;}
    #contacts .contact-icon {width: 35px;height: 35px;font-size: 19px;flex-shrink: 0;}
    .quick-response {padding: 14px !important;}
    .quick-response p {font-size:.9rem!important;line-height: 1.3;}
    .icon-circle--xl, .social-btn-lg, .icon-circle--md, .contact-icon {width: 42px!important;height: 42px!important;font-size: 18px !important;flex-shrink: 0;}
    .messenger-btn {gap: 10px;padding: 3px;}
    .footer-bottom-links {display: block;}
    .deco-bg {overflow: hidden;}
    .header-socials .icon-circle--md {width: 34px !important;height: 34px!important;}


}


/* ============================================================ */
/*               SVG DONUT CHART (car-selection-tool)           */
/* ============================================================ */
@keyframes drawSegRed {
    from { stroke-dashoffset: 471.24; opacity: 0; }
    to   { stroke-dashoffset: 0;      opacity: 1; }
}
@keyframes drawSegOrange {
    from { stroke-dashoffset: 471.24; opacity: 0; }
    to   { stroke-dashoffset: -329.87; opacity: 1; }
}
@keyframes drawSegGreen {
    from { stroke-dashoffset: 471.24; opacity: 0; }
    to   { stroke-dashoffset: -400.56; opacity: 1; }
}

@keyframes spin        { from { transform: rotate(0deg);    } to { transform: rotate(360deg);  } }
@keyframes spin-rev    { from { transform: rotate(0deg);    } to { transform: rotate(-360deg); } }
@keyframes bounce-fl   { 0%, 100% { transform: translateY(0);     } 50% { transform: translateY(-12px); } }
@keyframes bounce-fl-r { 0%, 100% { transform: translateY(0);     } 50% { transform: translateY(12px); } }

.chart-outer-ring { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 20; }
.chart-seg { fill: none; stroke-width: 20; stroke-linecap: round; opacity: 0; }
.chart-seg--red    { stroke: #e74c3c; stroke-dasharray: 329.87 471.24; stroke-dashoffset: 0;       animation: drawSegRed    2s ease-out 0.5s forwards; }
.chart-seg--orange { stroke: #FEAA0A; stroke-dasharray: 70.69  471.24; stroke-dashoffset: -329.87; animation: drawSegOrange 2s ease-out 1.5s forwards; }
.chart-seg--green  { stroke: #22c55e; stroke-dasharray: 70.69  471.24; stroke-dashoffset: -400.56; animation: drawSegGreen  2s ease-out 2.5s forwards; }

.chart-spin-ring   { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 1; border-radius: 50%; animation: spin 30s linear infinite; transform-origin: center; transform-box: fill-box; }
.chart-spin-ring-2 { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 1; border-radius: 50%; animation: spin-rev 25s linear infinite; transform-origin: center; transform-box: fill-box; }

/* Donut chart wrapper */
.chart-wrapper {
    position: relative;
    width: 100%; max-width: 500px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.chart-wrapper svg { transform: rotate(-90deg); position: relative; z-index: 10; }
.chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 15;
}
.chart-pct {
    font-size: clamp(56px, 8vw, 80px);
    font-weight: 900;
    color: white;
    line-height: 1;
    text-shadow: 0 0 25px rgba(231,76,60,0.9);
    transition: transform 0.1s;
}
.chart-pct-label {
    font-size: 14px;
    font-weight: 700;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.chart-bg-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(231,76,60,0.3);
    filter: blur(40px);
    transform: scale(1.5);
    animation: animate-pulse 3s ease-in-out infinite;
}

/* Floating percentage labels on chart */
.chart-label {
    position: absolute;
    z-index: 20;
    opacity: 0;
    cursor: pointer;
}
.chart-label--70 { bottom: 10%; right: -2%; animation: fadeInScale 1s ease-out 3s forwards; }
.chart-label--15a { top: 38%; left: -8%; animation: fadeInScale 1s ease-out 3.5s forwards; }
.chart-label--15b { top: 5%; left: 12%; animation: fadeInScale 1s ease-out 4s forwards; }

.chart-label__inner {
    padding: 16px 20px;
    border-radius: var(--radius-xl);
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border: 2px solid currentColor;
}
.chart-label__inner--red    { background: rgba(231,76,60,0.95);  color: #e74c3c;   blur(4px); }
.chart-label__inner--orange { background: rgba(254,170,10,0.95); color: #FEAA0A;  blur(4px); }
.chart-label__inner--green  { background: rgba(34,197,94,0.95);  color: #22c55e; backdrop-filter: blur(4px); }

.chart-label__inner .chart-label__num {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: white;
    margin-bottom: 4px;
}
.chart-label__inner .chart-label__text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.9);
}

/* Hero floating stat badges */
.hero-float-1 {
    position: absolute;
    top: 40%; left: -32px;
    z-index: 20;
    animation: bounce-fl 3s ease-in-out infinite;
}
.hero-float-2 {
    position: absolute;
    bottom: 15%; right: -16px;
    z-index: 20;
    animation: bounce-fl-r 4s ease-in-out infinite;
}
.hero-float-card {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(231,76,60,0.3);
    padding: 16px;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    white-space: nowrap;
}

/* Stats market reality cards */
.market-card {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-3xl);
    padding: 32px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    opacity: 0;
}
.market-card:hover { transform: translateY(-8px); }
.market-card--red    { border-color: rgba(231,76,60,0.4);  animation: slideInRight 1s ease-out 1s   forwards; }
.market-card--yellow { border-color: rgba(254,170,10,0.4); animation: slideInRight 1s ease-out 2s   forwards; }
.market-card--green  { border-color: rgba(34,197,94,0.4);  animation: slideInRight 1s ease-out 3s   forwards; }
.market-card:hover.market-card--red    { border-color: var(--color-red);    box-shadow: 0 0 40px rgba(231,76,60,0.4);  }
.market-card:hover.market-card--yellow { border-color: var(--color-yellow); box-shadow: 0 0 40px rgba(254,170,10,0.4); }
.market-card:hover.market-card--green  { border-color: #22c55e;       box-shadow: 0 0 40px rgba(34,197,94,0.4);  }

.market-pct {
    width: 96px; height: 96px;
    border-radius: var(--radius-xl);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900; color: white;
    flex-shrink: 0;
    transition: transform 0.5s;
}
.market-card:hover .market-pct { transform: scale(1.1) rotate(6deg); }

.market-pct--red    { background: linear-gradient(135deg, #e74c3c, #c0392b); box-shadow: 0 0 30px rgba(231,76,60,0.5); }
.market-pct--yellow { background: linear-gradient(135deg, #FEAA0A, #ca8a04); box-shadow: 0 0 30px rgba(254,170,10,0.5); }
.market-pct--green  { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 0 30px rgba(34,197,94,0.5); }

/* Animation delay utilities */
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-500  { animation-delay: 0.5s; }
.delay-700  { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }
.delay-1500 { animation-delay: 1.5s; }
.delay-2000 { animation-delay: 2s; }

/* Step circle for workflow */
.step-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--color-darker);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900;
    color: #6b7280;
    margin-bottom: 24px;
    transition: all 0.3s;
    position: relative;
    flex-shrink: 0;
}
.step-circle:hover,
.step-item:hover .step-circle {
    border-color: var(--color-orange);
    color: var(--color-orange);
}
.step-circle--active {
    border-color: var(--color-orange);
    color: var(--color-orange);
    box-shadow: 0 0 15px rgba(254,71,8,0.4);
}
.step-item { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Benefits hover icon */
.benefit-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-gray);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--color-orange);
    margin-bottom: 24px;
    transition: all 0.3s;
}
.benefit-card:hover .benefit-icon {
    background: var(--color-orange);
    color: white;
}

.uslugi-benefit-card:hover img {transform: translateY(-8px);}
.uslugi-benefit-card img {height: 250px;width:100%;object-fit: cover; transition: .5s}

/* Contact info card with pulse */

.contact-info-card-wrapper {
    align-items: stretch;
}
.contact-info-card-first-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-card-first-col .contact-info-card {
    flex: 1;
    margin-bottom: 0 !important;
}

.contact-info-card-second-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-card-second-col .glass-card,
.contact-info-card-second-col .quick-response {
    margin-bottom: 0 !important;
}

.contact-info-card-second-col .quick-response {
    flex: 1;
    display: flex;
    align-items: center;
}

.contact-info-card {
    flex: 1;
    border-radius: var(--radius-3xl);
    padding: 32px;
    align-items: center;
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s;
}
.contact-info-card:hover {
    border-color: rgba(231,76,60,0.5);
    box-shadow: 0 0 40px rgba(231,76,60,0.3);
    transform: translateY(-8px);
}
.contact-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: white;
    margin-bottom: 24px;
    animation: pulse-glow 3s ease-in-out infinite;
    transition: transform 0.3s;
}
.contact-info-card:hover .contact-icon { transform: scale(1.1); }

/* Quick response promo card */
.quick-response {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-3xl);
    padding: 24px;
    border: 1px solid rgba(231,76,60,0.3);
    background: linear-gradient(135deg, rgba(231,76,60,0.1), transparent);
}

/* Workflow connector line */
.workflow-connector {
    position: absolute;
    top: 70px; left: 0; width: 100%; height: 2px;
    background: linear-gradient(to right, transparent, rgba(254,71,8,0.5), transparent);
    z-index: 0;
}
.workflow-grid { position: relative; }

/* Video play button circle */
.play-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--color-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: white;
    transition: transform 0.3s;
    box-shadow: 0 0 20px rgba(231,76,60,0.6);
}
.video-card:hover .play-btn { transform: scale(1.1); }

/* YouTube channel CTA */
.yt-cta {
    background: rgba(31,31,31,0.6);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-3xl);
    padding: 40px 48px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.yt-cta-glow {
    position: absolute;
    top: 0; right: 0;
    width: 256px; height: 256px;
    background: rgba(231,76,60,0.2);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

/* Duration tag on videos */
.video-duration {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* ============================================================ */
/*               ICON-BOX COLOR VARIANTS                        */
/* ============================================================ */
.icon-box--red    { background: rgba(231,76,60,0.2);  color: #e74c3c; }
.icon-box--yellow { background: rgba(254,170,10,0.2); color: #FEAA0A; }
.icon-box--purple { background: rgba(168,85,247,0.2); color: #a855f7; }
.icon-box--blue   { background: rgba(59,130,246,0.2); color: #3b82f6; }
.icon-box--green  { background: rgba(34,197,94,0.2);  color: #22c55e; }

/* ============================================================ */
/*               STEP CIRCLE COLOR VARIANTS                     */
/* ============================================================ */
.step-circle--yellow {
    border-color: var(--color-yellow);
    color: var(--color-yellow);
    box-shadow: 0 0 15px rgba(254,170,10,0.4);
}
.step-circle--purple {
    border-color: #a855f7;
    color: #a855f7;
    box-shadow: 0 0 15px rgba(168,85,247,0.4);
}

/* ============================================================ */
/*              KOREA DELIVERY CIRCLES                          */
/* ============================================================ */
.delivery-circle {
    width: 128px; height: 128px;
    border-radius: 50%;
    background: var(--color-gray);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    margin: 0 auto 24px;
    transition: all 0.3s;
    position: relative;
}
.delivery-circle--red    { border: 4px solid var(--color-red);    box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
.delivery-circle--yellow { border: 4px solid var(--color-yellow); box-shadow: 0 0 0 0 rgba(254,170,10,0.4); }
.delivery-circle--purple { border: 4px solid #a855f7; box-shadow: 0 0 0 0 rgba(168,85,247,0.4); }
.delivery-circle:hover.delivery-circle--red    { box-shadow: 0 0 40px rgba(231,76,60,0.6); transform: scale(1.1); }
.delivery-circle:hover.delivery-circle--yellow { box-shadow: 0 0 40px rgba(254,170,10,0.6); transform: scale(1.1); }
.delivery-circle:hover.delivery-circle--purple { box-shadow: 0 0 40px rgba(168,85,247,0.6); transform: scale(1.1); }
.delivery-num          { font-size: 36px; font-weight: 900; line-height: 1; }
.delivery-num--red     { color: var(--color-red); }
.delivery-num--yellow  { color: var(--color-yellow); }
.delivery-num--purple  { color: #a855f7; }
.delivery-unit         { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ============================================================ */
/*              CARD BORDER VARIANTS                            */
/* ============================================================ */
.card--border-red    { border: 2px solid rgba(231,76,60,0.4) !important; }
.card--border-yellow { border: 2px solid rgba(254,170,10,0.4) !important; }
.card--border-purple { border: 2px solid rgba(168,85,247,0.4) !important; }
.card--border-blue   { border: 2px solid rgba(59,130,246,0.4) !important; }
.card--border-green  { border: 2px solid rgba(34,197,94,0.4) !important; }

/* Additional border utilities */
.border-yellow-40 { border-color: rgba(254,170,10,0.4) !important; }
.border-purple-40 { border-color: rgba(168,85,247,0.4) !important; }
.border-blue-40   { border-color: rgba(59,130,246,0.4) !important; }
.border-green-40  { border-color: rgba(34,197,94,0.4) !important; }

/* Additional glow utilities */
.glow-red    { box-shadow: 0 0 30px rgba(231,76,60,0.5) !important; }
.glow-yellow { box-shadow: 0 0 30px rgba(254,170,10,0.5) !important; }
.glow-purple { box-shadow: 0 0 30px rgba(168,85,247,0.5) !important; }
.glow-blue   { box-shadow: 0 0 30px rgba(59,130,246,0.5) !important; }

/* Alternating process timeline (Korea style) */
.process-timeline { position: relative; max-width: 900px; margin: 0 auto; }
.process-timeline::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, var(--color-red), var(--color-yellow), #a855f7);
    transform: translateX(-50%);
}
.process-timeline-step {
    display: flex;
    align-items: center;
    gap: 64px;
    margin-bottom: 48px;
    position: relative;
}
.process-timeline-step--left  { flex-direction: row; }
.process-timeline-num {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900;
    color: white;
    flex-shrink: 0;
    position: relative; z-index: 1;
    background: var(--color-darker);
    border: 4px solid var(--color-darker);
}
.process-timeline-num--red    { background: var(--color-red);    box-shadow: 0 0 30px rgba(231,76,60,0.5); }
.process-timeline-num--yellow { background: var(--color-yellow); box-shadow: 0 0 30px rgba(254,170,10,0.5); }
.process-timeline-num--purple { background: #a855f7; box-shadow: 0 0 30px rgba(168,85,247,0.5); }
.process-timeline-content { flex: 1; }
.process-timeline-content-right { flex: 1; text-align: right; }

@media (max-width: 768px) {
    .process-timeline::before { left: 32px; transform: none; }
    .process-timeline-step,
    .process-timeline-step--right { flex-direction: row !important; gap: 20px; }
    .process-timeline-content-right { text-align: left; }
    #breadcrumbs {display: none;}
}

.j4k-panel {min-height: auto;}
/* ============================================================ */
/*               MISC UTILITY ADDITIONS                         */
/* ============================================================ */
.inline-flex    { display: inline-flex !important; }
.cur-p          { cursor: pointer; }
.py10           { padding-top: 10px !important; padding-bottom: 10px !important; }
.gap0           { gap: 0 !important; }
.ls2            { letter-spacing: 0.08em; }
.text-link-hover { transition: color 0.2s; }
.text-link-hover:hover { color: var(--color-red); }

/* Custom checkbox (styled) */
.custom-checkbox {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    background: var(--color-darker);
    cursor: pointer;
    accent-color: var(--color-red);
    flex-shrink: 0;
}
.custom-checkbox:checked {
    background: var(--color-red);
    border-color: var(--color-red);
}