/* Industrial B2B theme: cool surfaces, graphite type, one operational accent. */
:root {
    --bg: oklch(98% 0.005 250);
    --surface: oklch(100% 0 0);
    --fg: oklch(22% 0.02 240);
    --muted: oklch(50% 0.018 240);
    --border: oklch(90% 0.008 240);
    --accent: oklch(58% 0.16 145);
    --accent-strong: oklch(46% 0.14 145);
    --accent-soft: oklch(94% 0.045 145);
    --ink-inverse: oklch(98% 0.005 250);
    --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

    --impl-primary-color: var(--accent);
    --impl-gradient-color: var(--accent);
    --impl-white-color: var(--surface);
    --impl-font-color: var(--muted);
    --impl-heading-color: var(--fg);
    --impl-bg-color: var(--fg);
    --impl-border-radius: 6px;
    --impl-box-shadow: 0 12px 30px oklch(22% 0.02 240 / 0.08);
    --impl-transition: 180ms ease;
}

html {
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.impl_navbar_nav,
.impl_btn,
select,
input,
textarea,
button {
    font-family: var(--font-display);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--fg);
    letter-spacing: 0;
    text-transform: none;
}

code, kbd, .impl_offer_text h4 {
    font-family: var(--font-mono);
}

::selection {
    color: var(--surface);
    background: var(--accent-strong);
}

::placeholder {
    color: oklch(50% 0.018 240 / 0.78);
}

*::-webkit-scrollbar-track {
    background: var(--bg);
}

*::-webkit-scrollbar {
    background: var(--bg);
}

*::-webkit-scrollbar-thumb {
    background: var(--accent);
}

.impl_preheader,
.impl_search_area {
    background: var(--fg);
}

.impl_header_social li a svg,
.impl_user_login svg {
    fill: oklch(98% 0.005 250 / 0.72);
}

.impl_preheader_info li a,
.impl_preheader_info li p {
    color: oklch(98% 0.005 250 / 0.72);
}

.impl_preheader_info li a:hover,
.impl_header_social li a:hover svg,
.impl_user_login:hover svg {
    color: var(--surface);
    fill: var(--surface);
}

.impl_banner_section {
    background-color: var(--bg);
}

.impl_banner_section::before {
    opacity: 0.22;
}

.impl_navbar .impl_logo {
    background: var(--accent);
    border-radius: 0 0 6px 6px;
}

.impl_navbar_nav li a {
    color: var(--fg);
}

.impl_navbar_nav li a:hover,
.impl_navbar_nav li a.active,
.impl_banner_text h6,
.impl_banner_tab li a.active,
.impl_banner_tab li a:hover {
    color: var(--accent-strong);
}

.impl_sub_menu {
    background: var(--surface);
    border-bottom-color: var(--accent);
    box-shadow: var(--impl-box-shadow);
}

.impl_sub_menu li a {
    border-bottom-color: var(--border);
}

.impl_sub_menu li a:hover {
    background: var(--accent-soft);
}

.impl_btn {
    color: var(--surface);
    background: var(--accent-strong);
    border: 1px solid var(--accent-strong);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.impl_btn:hover,
.impl_btn:focus-visible {
    color: var(--surface);
    background: oklch(39% 0.12 145);
    border-color: oklch(39% 0.12 145);
    transform: translateY(-1px);
}

.impl_btn:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid oklch(58% 0.16 145 / 0.34);
    outline-offset: 3px;
}

.impl_banner_form,
.impl_explore_box,
.impl_choose_box,
.impl_booking_box {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--impl-box-shadow);
}

.impl_banner_dropdown span::after {
    background-color: var(--border);
}

.impl_banner_dropdown select,
.impl_newsletter_form input {
    color: var(--fg);
    background: var(--surface);
}

.impl_type_img {
    border-color: var(--border);
    background: var(--surface);
}

.impl_type_img svg,
.impl_explore_info svg {
    fill: var(--muted);
}

.impl_type_box:hover .impl_type_img svg,
.impl_explore_card:hover .impl_explore_info svg {
    fill: var(--accent-strong);
}

.impl_type_box:hover .impl_type_text p,
.impl_explore_card:hover .impl_explore_text h6,
.impl_explore_card:hover .impl_explore_info h6,
.impl_explore_card:hover .impl_veh_price h5 {
    color: var(--accent-strong);
}

.impl_about_wrapper,
.impl_choose_wrapper,
.impl_news_wrapper {
    background: var(--accent-soft);
    border-radius: 8px;
}

.impl_about_heading p,
.impl_booking_heading p,
.impl_contact_heading p {
    color: var(--accent-strong);
}

.impl_about_heading h3,
.impl_choose_heading h3,
.impl_newsletter_text h3 {
    color: var(--fg);
}

.impl_about_list li::before {
    filter: saturate(0.7) hue-rotate(70deg);
}

.impl_fiter_tab {
    border-color: var(--border);
    background: var(--surface);
}

.impl_fiter_tab li a {
    color: var(--muted);
}

.impl_fiter_tab li a.active {
    color: var(--surface);
    background: var(--accent-strong);
}

.impl_explore_bottom {
    background: var(--bg);
}

.impl_explore_card:hover .impl_explore_bottom {
    background: var(--accent-soft);
}

.impl_offer_wrapper {
    background-image: none;
    background-color: var(--fg);
}

.impl_offer_icon {
    border-color: oklch(98% 0.005 250 / 0.28);
}

.impl_offer_text h4 {
    color: var(--surface);
}

.impl_offer_text p,
.impl_footer_text p,
.impl_footer_links li a,
.impl_footer_address li a {
    color: oklch(98% 0.005 250 / 0.68);
}

.impl_choose_icon,
.impl_choose_icon.icon_1,
.impl_choose_icon.icon_2,
.impl_choose_icon.icon_3,
.impl_choose_icon.icon_4 {
    background: var(--accent-soft);
    box-shadow: none;
    border: 1px solid oklch(58% 0.16 145 / 0.24);
}

.impl_choose_icon svg {
    fill: var(--accent-strong);
}

.impl_video_content {
    background-color: var(--fg);
}

.impl_newsletter_wrapper {
    background: var(--surface);
}

.impl_newsletter_form input {
    border-color: var(--border);
}

.impl_footer_wrapper {
    background-image: none;
    background-color: var(--fg);
}

.impl_footer_heading h6,
.impl_footer_links li a:hover,
.impl_footer_address li a:hover,
.impl_footer_social li a:hover svg {
    color: var(--surface);
    fill: var(--surface);
}

.impl_copyright_wrapper {
    background-color: oklch(16% 0.02 240);
}

@media (max-width: 991.98px) {
    .impl_navbar_nav {
        background-color: var(--surface);
    }

    .impl_navbar_nav li a {
        border-bottom-color: oklch(58% 0.16 145 / 0.24);
    }

    .impl_toggle_btn span {
        background: var(--fg);
    }

    .impl_offer_wrapper {
        border-left-color: var(--accent);
        border-right-color: var(--accent);
    }
}

/* Replace the template's warm promotional blocks with an industrial information system. */
.impl_ad_box {
    background-image: none !important;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    box-shadow: inset 0 3px 0 var(--accent), var(--impl-box-shadow);
    overflow: hidden;
}

.impl_ad_box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: oklch(98% 0.005 250 / 0.72);
}

.impl_ad_text,
.impl_ad_btn,
.impl_ad_img {
    z-index: 1;
}

.impl_ad_box.box-2 {
    background-color: oklch(94% 0.012 240);
}

.impl_ad_box.box-2::after {
    background: oklch(94% 0.012 240 / 0.72);
}

.impl_ad_text h3 {
    max-width: 240px;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0;
}

.impl_offer_wrapper {
    position: relative;
    border-top: 1px solid oklch(98% 0.005 250 / 0.14);
    border-bottom: 1px solid oklch(98% 0.005 250 / 0.14);
    background: var(--fg);
    border-radius: 2px;
    box-shadow: 0 18px 40px oklch(22% 0.02 240 / 0.14);
}

.impl_offer_wrapper::before {
    content: "PROCUREMENT WORKFLOW";
    position: absolute;
    top: 12px;
    left: 24px;
    color: oklch(98% 0.005 250 / 0.48);
    font: 11px/1 var(--font-mono);
    letter-spacing: 0.08em;
}

.impl_offer_box {
    position: relative;
    min-height: 146px;
    padding-top: 28px;
    border-right: 1px solid oklch(98% 0.005 250 / 0.14);
}

.impl_offer_box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0.24);
    transform-origin: left;
    transition: transform var(--impl-transition);
}

.impl_offer_box:hover::after {
    transform: scaleX(1);
}

.impl_offer_icon {
    border-radius: 2px;
    background: oklch(98% 0.005 250 / 0.08);
}

.impl_about_wrapper,
.impl_choose_wrapper,
.impl_news_wrapper {
    border-radius: 2px;
    border: 1px solid var(--border);
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .impl_offer_wrapper::before {
        left: 16px;
    }

    .impl_offer_box {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid oklch(98% 0.005 250 / 0.14);
    }
}