/* === BASE COLORS === */
/* ========================================
   COLOR BASE - Paleta kolorów projektu
   ======================================== */

:root {
    /* === BASE COLORS === */
    --color-orange: #FF9800;
    --color-orange-rgb: 250, 179, 15;

    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;

    --color-yellow: #fdc500;
    --color-yellow-rgb: 253, 197, 0;

    --color-blue: #32c5ff;
    --color-blue-rgb: 50, 197, 255;

    --color-green: #6be83a;
    --color-green-rgb: 107, 232, 58;

    --color-grey: #2d2e31;
    --color-grey-rgb: 45, 46, 49;

    /* === TRANSPARENCY VARIATIONS === */
    --color-orange-10: rgba(var(--color-orange-rgb), 0.1);
    --color-orange-20: rgba(var(--color-orange-rgb), 0.2);
    --color-orange-30: rgba(var(--color-orange-rgb), 0.3);
    --color-orange-50: rgba(var(--color-orange-rgb), 0.5);
    --color-orange-70: rgba(var(--color-orange-rgb), 0.7);
    --color-orange-90: rgba(var(--color-orange-rgb), 0.9);

    --color-black-10: rgba(var(--color-black-rgb), 0.1);
    --color-black-20: rgba(var(--color-black-rgb), 0.2);
    --color-black-30: rgba(var(--color-black-rgb), 0.3);
    --color-black-50: rgba(var(--color-black-rgb), 0.5);
    --color-black-70: rgba(var(--color-black-rgb), 0.7);
    --color-black-90: rgba(var(--color-black-rgb), 0.9);

    --color-yellow-10: rgba(var(--color-yellow-rgb), 0.1);
    --color-yellow-20: rgba(var(--color-yellow-rgb), 0.2);
    --color-yellow-30: rgba(var(--color-yellow-rgb), 0.3);
    --color-yellow-50: rgba(var(--color-yellow-rgb), 0.5);
    --color-yellow-70: rgba(var(--color-yellow-rgb), 0.7);
    --color-yellow-90: rgba(var(--color-yellow-rgb), 0.9);

    --color-blue-10: rgba(var(--color-blue-rgb), 0.1);
    --color-blue-20: rgba(var(--color-blue-rgb), 0.2);
    --color-blue-30: rgba(var(--color-blue-rgb), 0.3);
    --color-blue-50: rgba(var(--color-blue-rgb), 0.5);
    --color-blue-70: rgba(var(--color-blue-rgb), 0.7);
    --color-blue-90: rgba(var(--color-blue-rgb), 0.9);

    /* === GRADIENTS === */
    --gradient-orange-yellow: linear-gradient(135deg,
    var(--color-orange) 0%,
    var(--color-yellow) 100%);
    --gradient-yellow-orange: linear-gradient(135deg,
    var(--color-yellow) 0%,
    var(--color-orange) 100%);
    --gradient-blue: linear-gradient(135deg,
    var(--color-blue) 0%,
    var(--color-blue-70) 100%);

    /* === SHADOWS === */
    --shadow-concave: -2px -2px 5px 1px rgba(66, 74, 83, 0.55),
    5px 6px 7px 1px rgba(0, 0, 0, 0.51),
    inset 2px 2px 2px 1px rgba(71, 80, 89, 1.0),
    inset -2px -2px 2px 1px rgba(0, 0, 0, 0.25),
    0px 0px 0px 0px rgb(71 80 89 / 35%);

    --shadow-concave-yellow: -2px -2px 7px 2px rgba(250, 179, 15, 0.55),
    2px 3px 7px 2px rgba(250, 179, 15, 0.51),
    inset 2px 2px 2px 1px rgb(246 175 29 / 80%),
    inset -2px -2px 2px 1px rgb(255 178 0 / 25%),
    0px 0px 0px 0px rgb(255 178 0 / 35%);

    --shadow-convex: inset 6px 6px 8px #222425, inset -6px -6px 8px #3e4143;

    --shadow-convex-yellow: inset 3px 3px 6px #b38600, inset -2px -2px 4px #ffdb70;

    scrollbar-color: #9e9e9e var(--color-grey);
    scrollbar-width: thin;
}

[data-mobile-only] {
    display: none;
}

[data-desktop-only] {
    display: block;
}

.iti {
    width: 100%;
    --iti-path-flags-1x: url('../img/flags.webp');
    --iti-path-flags-2x: url('../img/flags@2x.webp');
    --iti-dropdown-bg: var(--color-grey);
    --iti-border-color: var(--bg-color-secondary);
}
.iti button:active {
    background-color: transparent;
    box-shadow: none;
}
.iti__selected-country {
    height: 90%;
    margin-top: 3px;
}
.iti__selected-dial-code {
    font-size: 14px;
}

/* ========================================
   UTILITY CLASSES - Text Colors
   ======================================== */

.text-orange {
    color: var(--color-orange) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-yellow {
    color: var(--color-yellow) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

/* ========================================
   UTILITY CLASSES - Border Colors
   ======================================== */

.border-orange {
    border-color: var(--color-orange) !important;
}

.border-black {
    border-color: var(--color-black) !important;
}

.border-yellow {
    border-color: var(--color-yellow) !important;
}

.border-blue {
    border-color: var(--color-blue) !important;
}

/* ========================================
   UTILITY CLASSES - Shadows
   ======================================== */

.shadow-orange {
    box-shadow: 0 8px 25px var(--color-orange-30) !important;
}

.shadow-yellow {
    box-shadow: 0 8px 25px var(--color-yellow-30) !important;
}

.shadow-blue {
    box-shadow: 0 8px 25px var(--color-blue-30) !important;
}

.shadow-black {
    box-shadow: 0 8px 25px var(--color-black-20) !important;
}

.pair-shadow{
    box-shadow: 1rem -0.5rem 1rem rgba(0, 0, 0, 0.15);
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
/*
@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.semibold.ttf") format("truetype");
    font-weight: 600;
} */

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Gruppo";
    src: url("../font/gruppo.regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: "Poppins", sans-serif !important;
    background-color: #303234;
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* navbar */
/* Base: smooth hide/show from your previous script */
#mainNav, #mainNavMobile {
    transition: transform 0.25s, box-shadow 0.2s, background-color 0.2s,
    border-color 0.2s;
    will-change: transform;
    z-index: 100;
    padding: 0.5rem 0;
}

#mainNav .container, #mainNavMobile .container {
    position: static!important;
    min-width: 100%;
}

#mainNav.is-hidden, #mainNavMobile.is-hidden {
    transform: translateY(-110%);
    box-shadow: none;
}

.navbar-glass {
    background-color: rgba(15, 15, 15, 0.4);
    border: 2px solid #2d2e31;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-width: 95%;
    margin: 0 auto;
    border-radius: 0 0 1rem 1rem;
    padding: 0 1rem;
    text-align: center;
}

.navbar-glass.is-stuck {
    background-color: rgba(15, 15, 15, 0.15);
    border-bottom-color: #2d2e31;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.navbar-glass .navbar-collapse.show,
.navbar-glass.is-stuck .navbar-collapse {
    background: transparent;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
#cookie-policy {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-dark .navbar-toggler:focus {
    box-shadow: none;
}

#mainNav .navbar-nav .nav-link.active, #mainNavMobile .navbar-nav .nav-link.active {
    color: var(--color-orange) !important;
}

.scroll-down-arrow {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-orange);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.scroll-down-arrow::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    background-image: url("../img/ccem/arrows_down_scroll.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    filter: brightness(0.95);
}

.scroll-down-arrow-mobile {
    width: 5rem;
    height: 5rem;
}

.scroll-down-arrow-mobile::before {
    width: 4rem;
    height: 4rem;
}

/* efekt hover */
.scroll-down-arrow:hover {
    transform: translateX(-50%) translateY(-4px);
    filter: brightness(1.18);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 30px rgba(var(--color-orange-rgb), 0.18);
}

.scroll-down-arrow:hover::before {
    filter: brightness(1.25);
    opacity: 1;
}

.scroll-down-arrow-mobile:hover {
    filter: none;
}

.scroll-down-arrow-mobile:hover::before {
    filter: none;
}

/* animacja bounce (przesunięcie w osi Y zachowując translateX) */
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(-8px); }
}

@supports not (backdrop-filter: none) {
    .navbar-glass {
        background-color: rgba(15, 15, 15, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    #mainNav, #mainNavMobile {
        transition: none;
    }
}

@media (min-width: 1261px) {
    #mainNav .navbar-nav .nav-item:not(:last-child) .nav-link::after,
    #mainNavMobile .navbar-nav .nav-item:not(:last-child) .nav-link::after {
        color: rgba(255, 255, 255, 0.5);
        content: "|";
        display: inline-block;
        margin: 0 0 0 1rem;
        opacity: 0.5;
    }
}

@media (max-width: 1260px) {
    #mainNav .navbar-nav .nav-item + .nav-item,
    #mainNavMobile .navbar-nav .nav-item + .nav-item {
        border-top: 4px solid rgba(255, 255, 255, 0.12);
    }

    /* Stack navbar items vertically on mobile */
    .navbar-collapse .d-flex.position-absolute {
        position: relative !important;
        /* flex-direction: column; */
        align-items: center !important;
        margin: 1rem 0 !important;
        gap: 1rem !important;
    }

    .navbar-demo-button {
        width: 100%;
    }
}

/* Navbar Demo Button */
.navbar-demo-button {

    color: var(--color-black) !important;
    box-shadow: 0 4px 15px var(--color-yellow-30), inset 0 1px 4px var(--color-black-20) !important;
    border: 2px solid var(--color-black) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.navbar-demo-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-black-10), transparent);
    transition: left 0.5s;
}

.navbar-demo-button:hover::before {
    left: 100%;
}

.navbar-demo-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--color-yellow-50), inset 0 1px 4px var(--color-black-30) !important;
}

.navbar-demo-button:active {
    transform: translateY(0) !important;
    transition: transform 0.1s !important;
}

.navbar-demo-button:focus {
    outline: 2px solid var(--color-yellow-50) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem var(--color-yellow-20) !important;
}

.separator-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4rem auto;
    width: 90%;
}

.separator {
    height: 3px;
    width: 100%;
    border-radius: 2px;
    color: var(--color-grey);
    box-shadow: inset 2px 2px 2px #475059, -2px -2px 4px rgba(66, 74, 83, 0.6),
    2px 2px 3px rgba(0, 0, 0, 0.3);
}

.separator-vertical {
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    color: var(--color-grey);
    box-shadow: inset 2px 2px 2px #475059, -2px 1px 4px rgba(66, 74, 83, 0.6),
    3px -3px 3px rgba(0, 0, 0, 0.3);
}

.buttons-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.div_concave_border {
    border-radius: 18px;
    background: #303234;
    box-shadow: var(--shadow-concave);
    border: 2px solid #000000;
    padding: 0.5rem;
    position: relative;
}

.div_convex_border {
    border-radius: 18px;
    background: #303234;
    box-shadow: var(--shadow-convex);
    padding: 0.5rem;
    position: relative;
}

.concave_container {
    border-radius: 29px;
    background: #26282a;
    box-shadow: inset 10px 10px 15px #1d1e20, inset -25px -25px 15px #303235;
}

.vertical_line_left {
    border-left: 2px solid #ffffff;
    padding-left: 1rem;
}

.horizontal_line {
    border-top: 2px solid #ffffff;
}

.cm-yellow {
    color: var(--color-orange);
}

/* carousel */
/* custom style to move indicators outside */
.carousel {
    padding-bottom: 2rem;
    position: relative;
}

.carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: var(--color-orange);
}

.carousel-indicators button {
    width: 80px !important;
    height: 5px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
    border-radius: 2px !important;
    background-color: rgba(255, 255, 255, 0.3);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 2rem;
    /* arrow size */
    color: rgba(255, 255, 255, 0.3);
    width: 40px;
    height: 40px;
}

.carousel-arrow-prev {
    left: -60px;
}

.carousel-arrow-next {
    right: -60px;
}

/* Neumorphic effect on symbol */
.arrow-symbol {
    display: inline-block;
    padding: 4px 4px;
    border-radius: 6px;
    box-shadow: 2px 2px 3px #1f2122,
        /* convex shadow */ -2px -2px 3px #3e4144;
    /* convex highlight */
    transition: all 0.2s ease-in-out;
}

/* Hover: concave press */
.carousel-arrow:hover .arrow-symbol {
    box-shadow: inset 2px 2px 3px #1f2122, inset -2px -2px 3px #3e4144;
    color: var(--color-orange);
}

.carousel_text_number {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-orange);
    top: 10%;
    left: 10%;
}


.main-component-container {
    width: 90vw;
    margin: 0 auto;
}

.development-paths-title {
    margin-top: 8rem;
    margin-bottom: 0;
}

.development-paths-title--with-alert {
    margin-top: 5rem;
    margin-bottom: 0;
}

/* Kluczowa poprawka layoutu */
.main-content-wrapper {
    width: 100vw;

    margin-top: 8rem;
}

.content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-section {
    align-self: flex-end;
    text-align: right;
}

.carousel-section {
    width: 100%;
}

.title-container {
    line-height: 3.5rem;
}

/* @media (max-height: 890px) {
    .title-container {
        font-size: 1rem;
        max-height: 7rem;
        min-height: 7rem;
    }
} */

.custom-carousel-item {
    overflow: visible !important;
}

.meet_left_side_individual_1 {
    background: url("../img/ccem/individual_client/meet_left_side_1.webp");
    background-size: cover;
}

.meet_left_side_business_1 {
    background: url("../img/ccem/business_client/meet_left_side_1.webp");
    background-size: cover;
}

.meet_right_side_individual_1 {
    background: url("../img/ccem/individual_client/meet_right_side_1.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_right_side_business_1 {
    background: url("../img/ccem/business_client/meet_right_side_1.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_individual_2 {
    background: url("../img/ccem/individual_client/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_business_2 {
    background: url("../img/ccem/business_client/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_individual_2 {
    background: url("../img/ccem/individual_client/meet_right_side_2.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_right_side_business_2 {
    background: url("../img/ccem/business_client/meet_right_side_2.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_individual_3 {
    background: url("../img/ccem/individual_client/meet_left_side_3.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_business_3 {
    background: url("../img/ccem/business_client/meet_left_side_3.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_individual_3 {
    background: url("../img/ccem/individual_client/meet_right_side_3.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_right_side_business_3 {
    background: url("../img/ccem/business_client/meet_right_side_3.webp");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_paths_1_360 {
    background: url("../img/ccem/development_paths/360/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_hr {
    background: url("../img/ccem/development_paths/hr/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_finances {
    background: url("../img/ccem/development_paths/finances/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_sales {
    background: url("../img/ccem/development_paths/sales/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_msp {
    background: url("../img/ccem/development_paths/msp/meet_left_side_1.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_paths_1_360 {
    background: url("../img/ccem/development_paths/360/meet_right_side_1.webp");
    background-size: cover;
}

.meet_right_side_paths_1_hr {
    background: url("../img/ccem/development_paths/hr/meet_right_side_1.webp");
    background-size: cover;
}

.meet_right_side_paths_1_finances {
    background: url("../img/ccem/development_paths/finances/meet_right_side_1.webp");
    background-size: cover;
}

.meet_right_side_paths_1_sales {
    background: url("../img/ccem/development_paths/sales/meet_right_side_1.webp");
    background-size: cover;
}

.meet_right_side_paths_1_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_right_side_1.webp");
    background-size: cover;
}

.meet_right_side_paths_1_msp {
    background: url("../img/ccem/development_paths/msp/meet_right_side_1.webp");
    background-size: cover;
}

.meet_left_side_paths_2_360 {
    background: url("../img/ccem/development_paths/360/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.2%, 0px);
}

.meet_left_side_paths_2_hr {
    background: url("../img/ccem/development_paths/hr/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_finances {
    background: url("../img/ccem/development_paths/finances/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_sales {
    background: url("../img/ccem/development_paths/sales/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_msp {
    background: url("../img/ccem/development_paths/msp/meet_left_side_2.webp");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_paths_2_360 {
    background: url("../img/ccem/development_paths/360/meet_right_side_2.webp");
    background-size: cover;
}

.meet_right_side_paths_2_hr {
    background: url("../img/ccem/development_paths/hr/meet_right_side_2.webp");
    background-size: cover;
}

.meet_right_side_paths_2_finances {
    background: url("../img/ccem/development_paths/finances/meet_right_side_2.webp");
    background-size: cover;
}

.meet_right_side_paths_2_sales {
    background: url("../img/ccem/development_paths/sales/meet_right_side_2.webp");
    background-size: cover;
}

.meet_right_side_paths_2_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_right_side_2.webp");
    background-size: cover;
}

.meet_right_side_paths_2_msp {
    background: url("../img/ccem/development_paths/msp/meet_right_side_2.webp");
    background-size: cover;
}

/* Global meet sides positioning - ensure they meet in center */
/* Pion przez zmienną: paralaksa (ccem-effects.js) przesuwa obraz w pionie, nie ruszając złożenia w środku. */
[class*="meet_left_side_"] {
    background-position: right var(--ccem-parallax-y, 50%) !important;
}

[class*="meet_right_side_"] {
    background-position: left var(--ccem-parallax-y, 50%) !important;
}

/* Logo styling */
.meet_left_side_individual_1 img,
.meet_left_side_business_1 img,
.meet_left_side_individual_2 img,
.meet_left_side_business_2 img,
.meet_left_side_individual_3 img,
.meet_left_side_business_3 img,
.meet_right_side_individual_1 img,
.meet_right_side_business_1 img,
.meet_right_side_individual_2 img,
.meet_right_side_business_2 img,
.meet_right_side_individual_3 img,
.meet_right_side_business_3 img,
.meet_left_side_paths_1_360 img,
.meet_right_side_paths_1_360 img,
.meet_left_side_paths_1_hr img,
.meet_right_side_paths_1_hr img,
.meet_left_side_paths_1_finances img,
.meet_right_side_paths_1_finances img,
.meet_left_side_paths_1_sales img,
.meet_right_side_paths_1_sales img,
.meet_left_side_paths_1_marketing img,
.meet_right_side_paths_1_marketing img,
.meet_left_side_paths_1_msp img,
.meet_right_side_paths_1_msp img,
.meet_left_side_paths_2_360 img,
.meet_right_side_paths_2_360 img,
.meet_left_side_paths_2_hr img,
.meet_right_side_paths_2_hr img,
.meet_left_side_paths_2_finances img,
.meet_right_side_paths_2_finances img,
.meet_left_side_paths_2_sales img,
.meet_right_side_paths_2_sales img,
.meet_left_side_paths_2_marketing img,
.meet_right_side_paths_2_marketing img,
.meet_left_side_paths_2_msp img,
.meet_right_side_paths_2_msp img {
    height: 2rem;
    width: auto;
    margin-bottom: 1rem;
}

.paths_text_shadow {
    background-color: rgba(0, 0, 0, 0.45);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.paths_text_shadow_mobile {
    background-color: rgba(0, 0, 0, 0.7);
}

#pair-indicators {
    z-index: 10;
}

.indicator-wrapper {
    cursor: pointer;
    padding: 0.5rem 0;
}

.indicator-btn {
    width: 80px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.indicator-btn.active {
    background-color: #FDC500;
    opacity: 1;
}

/* Responsive - separator container - width-based only */
@media (max-width: 1400px) {
    .separator-container {
        margin: 6rem auto 4rem auto;
    }
}

@media (max-width: 1240px) {
    .separator-container {
        margin: 3rem auto 3rem auto;
    }

    #movie_logo, #movie_quote {
        width: 80%!important;
    }
}

@media (max-width: 650px) {
    #movie_quote .blockquote {
        font-size: 16px !important;
    }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

.fs-responsive {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.69rem) !important;
}

.fs-responsive-lg {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 2.5rem) !important;
}

.fs-responsive-sm {
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1.5rem) !important;
}

@media (max-width: 1700px) {
    .fs-responsive {
        font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
    }
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

.logo-responsive {
    height: clamp(0.5rem, 2vw + 1rem, 3rem) !important;
    width: auto !important;
}

/* ========================================
   RESPONSIVE TEXT LAYOUT
   ======================================== */

@media (max-width: 1200px) {
    .pair-1 .row .col-6,
    .pair-2 .row .col-6,
    .pair-3 .row .col-6,
    [class*="pair-"] .row .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .text-start-position {
        position: relative;
    }
    .text-end-position {
        position: relative;
        top: -95%;
    }

    /*.meet_right_side_individual_1, .meet_right_side_individual_2, .meet_right_side_individual_3,*/
    /*.meet_right_side_business_1, .meet_right_side_business_2, .meet_right_side_business_3,*/
    /*[class*="meet_right_side_paths_1_"], [class*="meet_right_side_paths_2_"] {*/
    /*    background: none;*/
    /*    box-shadow: none;*/
    /*}*/

    /* .fs-responsive, .fs-responsive-sm {
        background-color: rgba(0, 0, 0, 0.4);
    } */

    .meet_left_side_individual_2 {
        background: url("../img/ccem/individual_client/meet_right_side_2.webp");
        background-size: cover;
    }

    /*.meet_left_side_business_2 {*/
    /*     background: url("../img/ccem/business_client/meet_right_side_2.webp");*/
    /*     background-size: cover;*/
    /*}*/

    .meet_left_side_paths_1_360 {
        background: url("../img/ccem/development_paths/360/meet_right_side_1.webp");
        background-size: cover;
    }

    .meet_left_side_paths_1_hr {
        background: url("../img/ccem/development_paths/hr/meet_right_side_1.webp");
        background-size: cover;
    }

    .meet_left_side_paths_1_finances {
        background: url("../img/ccem/development_paths/finances/meet_right_side_1.webp");
        background-size: cover;
    }

    .meet_left_side_paths_1_sales {
        background: url("../img/ccem/development_paths/sales/meet_right_side_1.webp");
        background-size: cover;
    }

    .meet_left_side_paths_1_marketing {
        background: url("../img/ccem/development_paths/marketing/meet_right_side_1.webp");
        background-size: cover;
    }

    .meet_left_side_paths_1_msp {
        background: url("../img/ccem/development_paths/msp/meet_right_side_1.webp");
        background-size: cover;
    }
}

.bottom-page {
    box-shadow: none;
}

.cm-buy-middle-box span {
    color: white;
}

.etap-icon {
    background-image: url("../img/ccem/tools_icon.svg");
}

.decision-icon {
    background-image: url("../img/ccem/line_icon.svg");
}

.exercise-icon {
    background-image: url("../img/ccem/tool_icon.svg");
}

.description-header:after {
    display: none !important;
    content: none !important;
}

.product-description-box, .product-description-buy-box, .product-description-sell-box {
    background-color: var(--backgroundColor);
    border-radius: 18px !important;
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e !important;
}

.neu.icon-box {
    border-radius: 12px;
    color: #e0e0e0;
    background-color: var(--backgroundColor);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.invoice-toggle {
    color: #e0e0e0;
    background-color: var(--backgroundColor);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.invoice-toggle:hover, .invoice-toggle.active {
    border: none;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form input {
    color: #e0e0e0;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form input:focus {
    box-shadow: inset 1px 1px 3px #26282a, inset -1px -1px 3px #3a3c3e;
}

.cm-buy-form .neomorph-input {
    color: #e0e0e0;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form .neu-button {
    color: #e0e0e0;
    background-color: var(--bg-color);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.cm-buy-form .neu-button:active {
    border: none;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
    transform: translateY(1px);
    transition: box-shadow 0.12s, transform 0.12s;
    outline: none;
}

.cm-buy-form .neu-concave {
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form .neu-radio-custom {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e6e9f0;
    box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);
    position: relative;
    cursor: pointer;
}

.cm-buy-form .neu-radio-custom.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #303234;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(163, 177, 198, 0.3),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
}

.cm-buy-form .neu-checkbox-custom,
#contact .neu-checkbox-custom {
    width: 16px;
    height: 16px;
    box-shadow: none;
    accent-color: var(--color-orange);
}

.cm-buy-form .neu-checkbox-custom:focus,
#contact .neu-checkbox-custom:focus {
    box-shadow: none;
}

.cm-buy-form .buy-button-container {
    width: 90%;
}

/* Quote divider with glowing gradient effect */
.quote-divider {
    position: relative;
}

.quote-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right,
    rgba(255, 165, 0, 0),
    rgba(255, 165, 0, 1) 15%,
    rgba(255, 165, 0, 1) 85%,
    rgba(255, 165, 0, 0)
    );
}

.quote-divider::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to right,
    transparent 0%,
    transparent 10%,
    rgba(255, 165, 0, 0.15) 15%,
    rgba(255, 165, 0, 0.25) 30%,
    rgba(255, 165, 0, 0.3) 50%,
    rgba(255, 165, 0, 0.25) 70%,
    rgba(255, 165, 0, 0.15) 85%,
    transparent 90%,
    transparent 100%
    );
    filter: blur(15px);
    pointer-events: none;
}

.neu.loader {
    box-shadow: var(--shadow-concave);
}
.circle-progress {
    box-shadow: none;
}

.font-gruppo {
    font-family: "Gruppo", cursive !important;
}


.collection-subjects-container {
    width: auto;
    text-align: center;
    position: relative;
    height: 210px;
    white-space: nowrap;
    margin-top: 30px;
    transition: all 0.5s ease 0s;
    left: 0px; /* sprawdzić w CM */
}

.video-popup .video-title {
    margin-bottom: 30px;
    font-size: 25px;
    border-bottom: 3px solid #d83a74;
    padding-left: 10px;
    padding-right: 10px;
}

.video-popup {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
}

#video-style-box.neu, #video-style-box .neu,
#test-style-box.neu, #test-style-box .neu,
#video-style-box .neu-ring-big,
#test-style-box .neu-ring-big,
#test-style-box .neu.style-test {
    color: #e0e0e0;
    background-color: var(--bg-color);
    box-shadow: var(--shadow-concave);
    border: 2px solid var(--color-black);
    border-radius: 18px;
    display: flex;
}

#video-style-box .neu-ring-inside,
#test-style-box .neu-ring-inside {
    background-color: var(--bg-color-secondary);
    box-shadow: 0 0 0 6px var(--bg-color-secondary), 0 0 0 10px var(--bg-color),
}

#video-style-box .neu-inset,
#test-style-box .neu-inset,
#video-style-box .neu-inset-hov:hover,
#test-style-box .neu-inset-hov:hover,
#video-style-box .neu-inset-act:active,
#test-style-box .neu-inset-act:active {
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.hexagon-pointer,
.hexagon-container .circle-item {
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.hexagon-pointer {
    cursor: pointer;
}

#tiles-container .div_concave_border {
    cursor: pointer;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), filter 0.38s ease;
    will-change: transform;
}

.hexagon-pointer:hover,
.hexagon-container .circle-item:hover,
#tiles-container .div_concave_border:hover {
    transform: scale(1.05);
}

.hexagon-pointer > img,
.hexagon-container .circle-item > img {
    transition: filter 0.38s ease;
}

.hexagon-pointer:hover > img,
.hexagon-container .circle-item:hover > img {
    filter: drop-shadow(0 0 10px rgba(253, 197, 0, 0.45));
}

#tiles-container .div_concave_border:hover {
    filter: drop-shadow(0 0 10px rgba(253, 197, 0, 0.45));
}

@media (prefers-reduced-motion: reduce) {
    .hexagon-pointer,
    .hexagon-container .circle-item,
    #tiles-container .div_concave_border,
    .hexagon-pointer > img,
    .hexagon-container .circle-item > img {
        transition: none;
        will-change: auto;
    }
}

.popup-flower {
    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.popup-flower.is-open {
    opacity: 1;
    visibility: visible;
    animation: popup-flower-appear 0.2s ease-out both;
}

.popup-flower.is-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    animation: popup-flower-disappear 0.18s ease-in both;
}

.popup-flower-inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--shadow-concave);
    max-width: 50vw;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: #e0e0e0;
    border: 2px solid #000000;
    pointer-events: auto;
}

.popup-flower.is-closing .popup-flower-inside {
    pointer-events: none;
}

@keyframes popup-flower-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popup-flower-disappear {
    from { opacity: 1; }
    to { opacity: 0; }
}

.popup-flower-body {
    margin: 20px 45px 20px 20px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    line-height: 1.6;
    text-align: left;
    hyphens: auto;
}

/* ========================================
   COOKIE CONSENT
   ======================================== */
#cookie-policy {
    position: fixed;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 2rem), 1120px);
    margin: 0 auto;
    padding: 1.15rem 1.25rem;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.95), rgba(30, 30, 30, 0.92));
    border: 2px solid #2d2e31;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
    z-index: 10000;
}

#cookie-policy-content,
#cookie-policy-banner {
    width: 100%;
}

#cookie-policy-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
    align-items: center;
}

#cookie-policy-consent {
    position: relative;
    min-width: 0;
    padding-left: 1rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

#cookie-policy-consent::before {
    content: '';
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--gradient-orange-yellow);
    box-shadow: 0 0 10px var(--color-orange-30);
}

/* Główne akcje: 2 przyciski w pierwszym rzędzie, preferencje wyśrodkowane pod nimi. */
#cookie-policy-buttons {
    display: grid;
    grid-template-columns: repeat(2, 220px);
    grid-template-areas:
        "accept reject"
        "preferences preferences";
    gap: 0.3rem 0.55rem;
    justify-content: center;
    align-items: center;
}

#cookie-policy-buttons .cookie-button--primary { grid-area: accept; }
#cookie-policy-buttons .cookie-button--secondary { grid-area: reject; }
#cookie-policy-buttons .cookie-button--ghost {
    grid-area: preferences;
    justify-self: center;
}

#cookie-policy-buttons .cookie-button {
    width: 220px;
}

.cookie-details-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cookie-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.cookie-button:hover { transform: translateY(-2px); }
.cookie-button:active { transform: translateY(0); }
.cookie-button:focus-visible {
    outline: 2px solid var(--color-yellow-70);
    outline-offset: 3px;
}

.cookie-button--primary {
    color: var(--color-black);
    background: var(--gradient-orange-yellow);
    border-color: var(--color-black);
    box-shadow: 0 5px 16px var(--color-yellow-20),
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px 2px var(--color-black-20);
}

.cookie-button--primary:hover {
    box-shadow: 0 8px 22px var(--color-yellow-30),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 2px var(--color-black-20);
}

.cookie-button--secondary {
    color: rgba(255, 255, 255, 0.88);
    background: #303234;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 3px 3px 8px #202224, -3px -3px 8px rgba(62, 65, 67, 0.72);
}

.cookie-button--secondary:hover {
    color: var(--color-orange);
    border-color: var(--color-orange-30);
    box-shadow: 4px 4px 10px #202224, -4px -4px 10px rgba(62, 65, 67, 0.75);
}

.cookie-button--ghost {
    color: var(--color-orange);
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--color-orange-30);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.28),
    inset -2px -2px 5px rgba(71, 80, 89, 0.18);
}

.cookie-button--ghost:hover {
    color: var(--color-yellow);
    background: var(--color-orange-10);
    border-color: var(--color-orange-50);
}

#cookie-policy-details {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

#cookie-policy-details.show {
    display: block !important;
    max-height: min(72vh, 780px);
}

#cookie-policy-details.hide {
    max-height: 0;
    transition-duration: 0.25s;
}

#cookie-policy-text {
    max-height: 24vh;
    margin-bottom: 1rem;
    padding: 0.15rem 0.35rem 0.1rem 0;
    overflow-y: auto;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
    scrollbar-color: rgba(var(--color-orange-rgb), 0.5) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
}

#cookie-policy-text::-webkit-scrollbar { width: 6px; }
#cookie-policy-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
}
#cookie-policy-text::-webkit-scrollbar-thumb {
    background: var(--color-orange-50);
    border-radius: 999px;
}
#cookie-policy-text::-webkit-scrollbar-thumb:hover { background: var(--color-orange-70); }

.cookie-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.cookie-option {
    min-width: 0;
    padding: 0.9rem 1rem;
    background: rgba(38, 40, 42, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    box-shadow: inset 3px 3px 6px #202224,
    inset -3px -3px 6px rgba(58, 60, 62, 0.78);
    transition: transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.cookie-option--clickable {
    cursor: pointer;
}

.cookie-option--clickable:hover,
.cookie-option--clickable:focus-within {
    transform: translateY(-2px);
    background: rgba(45, 47, 49, 0.94);
    border-color: var(--color-orange-30);
    box-shadow: 3px 3px 10px #202224,
    -3px -3px 10px rgba(62, 65, 67, 0.58),
    0 0 14px var(--color-orange-10);
}

.cookie-option--clickable:hover .form-check-label,
.cookie-option--clickable:focus-within .form-check-label {
    color: var(--color-orange);
}

.cookie-option--disabled {
    cursor: default;
}

.cookie-option-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cookie-option .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
    background-color: #26282a;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    accent-color: var(--color-orange);
}

.cookie-option .form-check-input:checked {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.cookie-option .form-check-input:focus {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 0.18rem var(--color-orange-20);
}

.cookie-option .form-check-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.cookie-option .form-check-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.88rem;
    font-weight: 700;
}

.cookie-option small {
    display: block;
    margin-top: 0.55rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    line-height: 1.55;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

#cookie-policy-details-buttons {
    width: 100%;
    max-width: 920px;
    margin: 1rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
    #cookie-policy-banner {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    #cookie-policy-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    #cookie-policy-buttons .cookie-button {
        width: 100%;
        height: 44px;
        min-height: 44px;
        padding: 0.55rem 0.7rem;
        white-space: normal;
    }

    #cookie-policy-buttons .cookie-button--ghost {
        width: calc((100% - 0.5rem) / 2);
    }

    .cookie-options { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    #cookie-policy {
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
        padding: 1rem;
        border-radius: 16px;
    }

    #cookie-policy-consent {
        padding-left: 0.8rem;
        font-size: 0.86rem;
    }

    .cookie-option small {
        text-align: left;
        text-align-last: auto;
        hyphens: none;
        -webkit-hyphens: none;
    }

    .cookie-button {
        font-size: 0.72rem;
        white-space: normal;
    }

    .cookie-details-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        width: 100%;
    }

    .cookie-details-actions .cookie-button {
        width: 100%;
        min-height: 44px;
        padding: 0.55rem 0.7rem;
        font-size: 0.72rem;
        white-space: normal;
    }

    #cookie-policy-details.show {
        max-height: 76vh;
        overflow-y: auto;
        padding-right: 0.2rem;
    }

    #cookie-policy-text {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 390px) {
    #cookie-policy-buttons .cookie-button {
        height: 48px;
        min-height: 48px;
        padding: 0.45rem;
        font-size: 0.68rem;
        line-height: 1.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cookie-policy-details,
    .cookie-button {
        transition: none;
    }
}

/* ========================================
   ETAP TIMELINE - Straight line visualization
   ======================================== */

.etap-timeline {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.etap-timeline-labels {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
}

.etap-timeline-labels--top {
    margin-left: 0;
}

.etap-timeline-labels--bottom {
    margin-left: 0;
}

.etap-label-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    max-width: none;
    overflow: visible;
    min-height: 46px;
    cursor: pointer;
}


.etap-timeline-track {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 36px;
}

.etap-timeline-line {
    position: absolute;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 5px;
}

.etap-timeline-line--done {
    left: 0;
    width: 0;
    background: var(--color-blue);
    box-shadow: 0 0 8px var(--color-blue-50),
    0 0 4px 2px var(--color-blue-70);
    z-index: 1;
    height: 3px;
}

.etap-timeline-line--future {
    left: 0;
    width: 100%;
    background: #2a2c2e;
    box-shadow: inset 2px 2px 4px #1a1b1d, inset -2px -2px 4px #3a3c3e, 0 0.6px 0.6px rgba(255, 255, 255, 0.2);
    z-index: 0;
}

.etap-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    min-width: 0;
    transition: transform 0.2s ease;
}

.etap-node-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.etap-node-done .etap-node-circle {
    background: #2a2c2e;
    border: 3px solid var(--color-blue);
    box-shadow: 0 0 8px var(--color-blue-50),
    inset 2px 2px 4px #1a1b1d,
    inset -2px -2px 4px #3a3c3e;
}

.etap-node-current .etap-node-circle {
    background: #2a2c2e;
    border: 3px solid var(--color-yellow);
    box-shadow: 0 0 8px var(--color-yellow-50),
    inset 2px 2px 4px #1a1b1d,
    inset -2px -2px 4px #3a3c3e;
    position: relative;
}

.etap-node-current .etap-node-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffe066, var(--color-yellow));
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.etap-node-future .etap-node-circle {
    background: #2a2c2e;
    border: none;
    box-shadow: -1px -1px 2px 1px rgba(0, 0, 0, 0.3), 1px 1px 2px 1px rgba(255, 255, 255, 0.08), inset 3px 3px 6px #1a1b1d, inset -3px -3px 6px #3a3c3e;
}

.etap-node-label {
    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    width: 160px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
    overflow: hidden;
    padding: 4px 10px;
    box-sizing: border-box;
    border-radius: 23px;
    background: #303234;
}

.etap-label-slot.etap-node-done .etap-node-label {
    color: var(--color-blue);
    background: #2a2c2e;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.etap-label-slot.etap-node-done.etap-node-active-click .etap-node-label {
    color: var(--color-yellow);
    background: #2a2c2e;
    border: 2px solid var(--color-yellow);
    box-shadow: 0 0 10px var(--color-yellow-50),
    0 0 20px var(--color-yellow-30);
}

.etap-label-slot.etap-node-current .etap-node-label {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1a1a1a;
    background: var(--color-yellow);
    border: none;
    box-shadow: 0 4px 8px 2px #00000059, inset 8px 20px 8px -14px #fff9;
}

.etap-label-slot.etap-node-future .etap-node-label {
    color: rgba(255, 255, 255, 0.4);
    background: #2a2c2e;
    border: 0px solid rgba(255, 255, 255, -0.93);
    box-shadow:-1px -1px 2px 1px rgba(0, 0, 0, 0.3), 1px 1px 2px 1px rgba(255, 255, 255, 0.08), inset 3px 3px 6px #1a1b1d, inset -3px -3px 6px #3a3c3e;
}

.etap-node-done.etap-node-active-click .etap-node-circle {
    background: #2a2c2e;
    border: 3px solid var(--color-blue);
    box-shadow: 0 0 10px var(--color-blue-50),
    inset 2px 2px 4px #1a1b1d,
    inset -2px -2px 4px #3a3c3e;
    position: relative;
}

.etap-node-done.etap-node-active-click .etap-node-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #5dd8ff, var(--color-blue));
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.cm-bottom-cards .collection-card-result {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.result-pill-btn {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 0.65rem;
    transition: box-shadow 0.2s, transform 0.2s;
    height: 36px;
    border: 0px;
}

.result-pill-btn .pill-label {
    color: var(--color-blue);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.5px;
    padding: 0 0.7rem;
}

.result-pill-btn .pill-value {
    color: var(--color-blue);
    font-weight: 700;
    white-space: nowrap;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2c2e;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 2px 2px 5px #1a1b1d, inset -2px -2px 4px #3a3c3e,
    0 0 8px rgba(93, 216, 255, 0.15);
    margin-right: -2px;
    font-size: 0.65rem;
}

.result-pill-btn:disabled,
.result-pill-btn.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

#ccem-card-results-popup #ccem-card-results-box {
    width: 60%;
    min-width: 680px;
    max-width: 900px;
    min-height: 0;
    overflow-y: auto;
}

#ccem-card-results-box td:first-child {
    width: 40%;
}

#ccem-card-results-box td:second-child {
    width: 30%;
}

.card-results-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-yellow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: "Grupo", sans-serif;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(250, 179, 15, 0.25);
    text-align: center;
}

.card-results-list {
    overflow-x: auto;
}

.card-results-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-results-item .item-label {
    flex: 0 0 200px;
    font-size: 0.85rem;
    color: white;
    white-space: nowrap;
}

.card-results-item .item-bar-wrapper {
    flex: 1;
    height: 10px;
    background: #1a1a1a;
    border-radius: 5px;
    overflow: hidden;
}

.card-results-item .item-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.card-results-item .item-value {
    flex: 0 0 55px;
    text-align: right;
    font-weight: 700;
    font-size: 0.85rem;
    color: #eee;
}

.btn-start {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a1a1a;
    background: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 0.5rem 2rem;
    cursor: pointer;
    box-shadow: 0 4px 8px 2px #00000059, inset 8px 20px 8px -14px #fff9;
    transition: box-shadow 0.2s, transform 0.2s;
}

.btn-start:hover {
    box-shadow: 0 6px 18px var(--color-yellow-50);
    transform: translateY(-1px);
}

.collection-top-photo.ccem-bg-video {
    background-image: url(../img/ccem/my_development_paths/video.webp);
}

.collection-top-photo.ccem-bg-reminder {
    background-image: url(../img/ccem/my_development_paths/reminder.webp);
}

.collection-top-photo.ccem-bg-results {
    background-image: url(../img/ccem/my_development_paths/results.webp);
}

.collection-top-photo.ccem-bg-simtrade {
    background-image: url(../img/ccem/my_development_paths/etap_simtrade.webp);
}

.collection-top-photo.ccem-bg-simproduct {
    background-image: url(../img/ccem/my_development_paths/etap_simproduct.webp);
}

.collection-top-photo.ccem-bg-simservice {
    background-image: url(../img/ccem/my_development_paths/etap_simservice.webp);
}



/* Flower Results Popup Tables */
.flower-results-popup {
    padding: 10px 20px;
    overflow-y: auto;
    max-height: 70vh;
}

.flower-table {
    width: 100%;
}

.flower-table-title {
    text-align: center;
    color: var(--color-orange);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(250, 179, 15, 0.25);
}

.flower-table-title span {
    color: white;
}

.flower-results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px 6px;
}

.flower-results-table thead th {
    color: var(--color-orange);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(250, 179, 15, 0.2);
}

.flower-results-table thead th:first-child {
    text-align: left;
}

.flower-results-table tbody tr {
    background: linear-gradient(145deg, #2a2d2e, #1f2122);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.flower-results-table tbody tr:hover {
    background: linear-gradient(145deg, #33363a, #272a2c);
}

.flower-results-table td {
    padding: 12px 16px;
    font-size: 0.95rem;
}

.flower-results-table tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}

.flower-results-table tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}

.flower-cell-label {
    color: #e0e0e0;
    font-weight: 500;
}

.flower-cell-value {
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 80px;
}

.flower-cell-part-value, .flower-cell-part-percent {
    display: inline-block;
}

.flower-cell-part-value {
    width: 60%;
}

.flower-cell-part-percent {
    width: 40%;
}


.flower-cell-part + .flower-cell-part::before {
    content: ' ';
}

.flower-cell-part.disabled {
    color: #555555;
    font-size: 11px;
}

.flower-header {
    color: var(--color-orange);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    background: transparent !important;
    text-align: center;
}

/* .flower-header td {
    padding: 0px;
} */

.flower-header-title {
    background: #222425;
    border-radius: 15px 15px 0px 0px!important;
    padding: 5px 0px;
}

/* Group header rows for single simulation table */
.flower-group-header td {
    color: var(--color-orange);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 14px 16px 8px 16px;
    background: transparent !important;
    border-bottom: 1px solid rgba(250, 179, 15, 0.15);
}

.flower-header td.narrow {
    width: 38%;
}

.flower-results-table tbody tr.flower-group-header {
    background: transparent;
}

.flower-results-table tbody tr.flower-group-header:hover {
    background: transparent;
}

.cat-info-icon {
    display: inline-block;
    cursor: pointer;
    font-size: 0.85em;
    margin-left: 6px;
    color: var(--color-orange);
    opacity: 0.7;
    transition: opacity 0.2s;
    vertical-align: middle;
}

.cat-info-icon:hover {
    opacity: 1;
}

.cat-description-content {
    padding: 24px 32px;
    color: #e0e0e0;
}

.cat-description-title {
    color: var(--color-orange);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cat-description-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #c0c0c0;
}

.flower-results-table-single .flower-cell-label {
    padding-left: 28px;
    color: #ffffff;
    font-weight: 400;
}

.flower-cell-label.orange {
    color: var(--color-orange);
    font-weight: 600;
}

.flower-results-table-single .flower-cell-value {
    text-align: right;
    padding-right: 24px;
}

.flower-results-table-single .flower-cell-label.disabled,
.flower-results-table-single .flower-cell-value.disabled {
    color: #555555;
    pointer-events: none;
}

.circle-item {
    cursor: pointer;
}

.flower-group-value {
    text-align: right;
    padding-right: 24px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .ai-chat-text.left {
        border-radius: 0px 18px 18px 18px;
        -webkit-border-radius: 0px 18px 18px 18px;
        -moz-border-radius: 0px 18px 18px 18px;
    }

    .ai-chat-text.right {
        border-radius: 18px 0px 18px 18px;
        -webkit-border-radius: 18px 0px 18px 18px;
        -moz-border-radius: 18px 0px 18px 18px;
    }
}

#flower-circle { aspect-ratio: 1; }
#flower-circle.circle-orange { content: url('/img/ccem/hexagons/circle_orange_border.webp'); }
#flower-circle.circle-green  { content: url('/img/ccem/hexagons/circle_green_border.webp'); }
#flower-circle.circle-purple { content: url('/img/ccem/hexagons/circle_purple_border.webp'); }

#flower-header-text.header-orange { color: #F2C63C!important; }
#flower-header-text.header-green  { color: #83FE4A!important; }
#flower-header-text.header-purple { color: #8489CB!important; }


/* END - Flower Results Popup Tables */

.skill-value-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    height: 47px;
}

.skill-bar-wrapper {
    flex: 1;
    height: 20px;
    background: #1a1a1a;
    border-radius: 15px;
    overflow: hidden;
}

.skill-bar {
    height: 100%;
    border-radius: 15px;
    transition: width 0.4s ease;
}

.skill-bar-green  { background: #6be83a; }
.skill-bar-yellow { background: #f4c542; }
.skill-bar-red    { background: #e05c7a; }
.skill-bar-empty  { width: 0 !important; background: transparent; }

.skill-pct {
    flex: 0 0 42px;
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
}

.skill-value-cell.disabled .skill-pct{
    color: #555555;
    font-size: 10px;
}

.flower-results-table td.skill-impact {
    font-size: 0.8rem;
    white-space: nowrap;
    padding-left: 8px !important;
}

/* ========================================
   PROMO BANNER
   ======================================== */

.promo-banner {
    width: min(88vw, 760px);
    margin: 8rem auto 0;
    padding: 0.75rem 1rem;

    position: relative;
    overflow: hidden;

    color: var(--color-black);
    background: var(--gradient-orange-yellow);
    border: 2px solid var(--color-black);
    border-radius: 0.75rem;

    box-shadow:
        0 8px 25px var(--color-yellow-30),
        inset 0 2px 8px var(--color-black-20);
}

.promo-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.promo-banner__eyebrow {
    flex-shrink: 0;

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.promo-banner__text {
    margin: 0;

    font-size: 0.85rem;
    line-height: 1.3;
}

.promo-banner__button {
    flex-shrink: 0;

    padding: 0.4rem 0.8rem;

    color: var(--color-yellow);
    background: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 0.5rem;

    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.promo-banner__button:hover,
.promo-banner__button:focus {
    color: var(--color-black);
    background: transparent;
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .promo-banner {
        width: 90vw;
        margin-top: 6rem;
    }

    .promo-banner__content {
        gap: 0.6rem;
    }

    .promo-banner__text {
        font-size: 0.75rem;
    }

    .promo-banner__eyebrow {
        font-size: 0.6rem;
    }

    .promo-banner__button {
        padding: 0.35rem 0.6rem;
        font-size: 0.65rem;
    }
}

/* popup promo */

.promo-popup__close {
    position: absolute !important;
    top: 0.35rem !important;
    right: 0.35rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10;
    cursor: pointer;

    transform: scale(0.65);
    transform-origin: top right;
}

.promo-popup__close:hover,
.promo-popup__close:focus {
    transform: scale(0.72);
    outline: none;
}

.promo-popup-content {
    padding-right: 2.25rem;
}

#promo-popup {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;

    width: min(320px, calc(100vw - 3rem));

    color: #fff;
    background: rgba(15, 15, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid var(--color-orange);
    border-radius: 0.75rem;

    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.28),
        0 0 24px var(--color-orange-10);

    overflow: hidden;
}

.promo-popup-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.15rem 1.15rem;
}

.promo-popup-content__label {
    color: var(--color-orange);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.promo-popup-content__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.45;
}

.promo-popup-content__button {
    align-self: center;
    width: fit-content;
    height: 44px;
    margin-top: 0.35rem;
    padding: 0 1.1rem !important;

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

    font-size: 1rem;
    letter-spacing: 0.4px;
    text-decoration: none;
}

.promo-popup-content__button .button-text {
    z-index: 2;
    gap: 0.25rem;
}

.promo-popup-content__button .button-main {
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    #promo-popup {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }

    .promo-popup-content {
        padding: 0.85rem 1rem 1rem;
    }
}

/* ===== Efekty przewijania (webroot/js/ccem-effects.js) =====
   Stany początkowe działają tylko z klasą .ccem-fx na body (dodaje ją skrypt), więc bez JS treść jest widoczna od razu.
   Animacje są krótkie i jednorazowe; przy „ograniczonym ruchu” (.ccem-fx-reduced) pokazujemy stan końcowy. */

/* Tło w kolorze zdjęć, zanim obraz się wczyta – zamiast szarej pustej plamy. */
.ccem-fx [class*="meet_left_side_"],
.ccem-fx [class*="meet_right_side_"],
.ccem-fx .graphic-background,
.ccem-fx .desc_right_side_1,
.ccem-fx .desc_left_side_1 {
    background-color: #0d2232;
}

/* Liczniki: stała szerokość cyfr, żeby tekst obok nie skakał w trakcie odliczania. */
[data-ccem-count] {
    font-variant-numeric: tabular-nums;
}

/* Zegar na kaflach ścieżek – jeden obrót. */
.ccem-clock.is-spinning {
    animation: ccem-clock-spin 0.9s ease-out 1;
}

@keyframes ccem-clock-spin {
    from { transform: rotate(-360deg); }
    to { transform: rotate(0deg); }
}

/* Karuzela: zdjęcie slajdu lekko się przybliża (kopia tła w ::before, żeby tekst na zdjęciu stał w miejscu),
   numer wjeżdża z prawej, punkty po prawej wsuwają się po kolei. */
/* Kopia tła leży pod tekstem dzięki własnemu kontekstowi warstw (isolation) – bez ustawiania pozycji tekstu,
   bo stary CSS numeru ma left/top, które zaczęłyby działać przy position: relative. */
.ccem-fx .ccem-zoom {
    isolation: isolate;
}

.ccem-fx .ccem-zoom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: -1;
}

.ccem-fx .ccem-zoom.is-zooming::before {
    animation: ccem-slide-zoom 1.2s ease-out 1;
}

@keyframes ccem-slide-zoom {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

/* Numer slajdu czeka ukryty, aż slajd się zatrzyma, i wtedy wjeżdża z prawej. */
.ccem-fx .carousel_text_number.ccem-number-wait {
    opacity: 0;
}

.ccem-fx .carousel_text_number.is-number-in {
    animation: ccem-number-in 0.6s ease-out 1;
}

@keyframes ccem-number-in {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.ccem-fx .ccem-point {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.ccem-fx .ccem-point.is-in {
    opacity: 1;
    transform: none;
}

/* Słowa pogrubione w treści startują jako zwykły tekst; po kolei przygasają i wracają już pogrubione.
   Grubość zmienia się, gdy słowo jest prawie przezroczyste, żeby poszerzenie liter było mało widoczne. */
.ccem-fx #textContentLeft b,
.ccem-fx #textContentRight b,
.ccem-fx #textContentLeft strong,
.ccem-fx #textContentRight strong {
    font-weight: 400;
}

.ccem-fx #textContentLeft .is-drawn,
.ccem-fx #textContentRight .is-drawn {
    font-weight: 700;
    animation: ccem-bold-in 0.8s ease-in-out 1;
}

@keyframes ccem-bold-in {
    0% { opacity: 1; font-weight: 400; }
    45% { opacity: 0.1; font-weight: 400; }
    55% { opacity: 0.1; font-weight: 700; }
    100% { opacity: 1; font-weight: 700; }
}

/* Listy w akapitach: kropka zamienia się w zielony ✓. */
.ccem-fx #textContentLeft ul,
.ccem-fx #textContentRight ul {
    list-style: none;
    padding-left: 0.25rem;
}

.ccem-fx #textContentLeft li,
.ccem-fx #textContentRight li {
    transition: color 0.4s ease;
}

.ccem-fx #textContentLeft li::before,
.ccem-fx #textContentRight li::before {
    content: "•";
    display: inline-block;
    width: 1.6em;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.ccem-fx #textContentLeft li.is-checked::before,
.ccem-fx #textContentRight li.is-checked::before {
    content: "✓";
    color: var(--color-green);
    font-weight: 700;
    animation: ccem-check-pop 0.5s ease-out 1;
}

@keyframes ccem-check-pop {
    from { transform: scale(0.2) rotate(-25deg); opacity: 0; }
    55% { transform: scale(1.8) rotate(0deg); opacity: 1; }
    to { transform: scale(1.15); }
}

/* Nagłówki dwukolorowe: kolorowe słowo wjeżdża po białym, potem raz przelatuje po nim połysk. */
.ccem-fx .ccem-heading .green-text,
.ccem-fx .ccem-heading .orange-text {
    display: inline-block;
    opacity: 0;
    transform: translateX(0.6em);
    transition: opacity 0.5s ease-out 0.25s, transform 0.5s ease-out 0.25s;
}

.ccem-fx .ccem-heading.is-lit .green-text,
.ccem-fx .ccem-heading.is-lit .orange-text {
    opacity: 1;
    transform: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 250% 100%;
    background-position: 100% 0;
    animation: ccem-heading-shine 1.2s ease-in-out 0.8s 1 forwards;
}

.ccem-fx .ccem-heading.is-lit .green-text {
    background-image: linear-gradient(110deg, var(--color-green) 40%, #ffffff 50%, var(--color-green) 60%);
}

.ccem-fx .ccem-heading.is-lit .orange-text {
    background-image: linear-gradient(110deg, var(--color-orange) 40%, #ffffff 50%, var(--color-orange) 60%);
}

@keyframes ccem-heading-shine {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Świecące punkty na grafikach – pulsują w pętli, gdy grafika jest na ekranie.
   Ruch dłuższy niż 5 s: WCAG 2.2.2 wymaga sposobu na jego zatrzymanie. */
.ccem-glow {
    position: relative;
}

/* Warstwa kropek nad grafiką; każda kropka ma własne położenie, kolor, tempo i opóźnienie (zmienne z JS),
   dlatego zapalają się i gasną niezależnie od siebie. */
.ccem-glow-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen;
}

.ccem-dot {
    position: absolute;
    left: var(--ccem-dot-x);
    top: var(--ccem-dot-y);
    width: var(--ccem-dot-size);
    height: var(--ccem-dot-size);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ccem-dot-rgb), 0.9) 0, rgba(var(--ccem-dot-rgb), 0) 70%);
    opacity: 0;
}

.ccem-glow.is-glowing .ccem-dot {
    animation: ccem-glow-pulse var(--ccem-dot-duration) ease-in-out var(--ccem-dot-delay) infinite alternate;
}

@keyframes ccem-glow-pulse {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Grafika obok kart kompetencji zmienia odcień razem z podświetloną kartą. */
.ccem-fx .graphic-background {
    background-position: 50% var(--ccem-parallax-y, 50%);
    filter: hue-rotate(var(--ccem-hue, 0deg));
    transition: opacity 0.8s ease, filter 0.6s ease;
}

/* Karta kompetencji / unikalności na środku ekranu – podświetlona ramka (oprócz koloru zmienia się też grubość). */
.ccem-fx #section-one .content-card.ccem-lit {
    box-shadow: 0 0 0 2px var(--color-green), 0 0 18px rgba(var(--color-green-rgb), 0.35);
}

.ccem-fx #section-two .content-card.ccem-lit {
    box-shadow: 0 0 0 2px var(--color-orange), 0 0 18px rgba(var(--color-orange-rgb), 0.35);
}

/* Oś postępu przy prawej krawędzi (tylko ozdoba, bez kliknięć). */
.ccem-rail {
    position: fixed;
    top: 50%;
    right: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.ccem-rail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.ccem-rail-dot.is-passed {
    background: rgba(255, 255, 255, 0.45);
}

.ccem-rail-dot.is-active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    transform: scale(1.5);
}

/* Strzałka „w dół”: trzy podskoki na zachętę, znikają po pierwszym przewinięciu. */
.scroll-down-arrow.ccem-nudge {
    animation: bounce 1.2s ease-in-out 3;
}

/* Ograniczony ruch: od razu stan końcowy, bez animacji. */
.ccem-fx-reduced *,
.ccem-fx-reduced *::before,
.ccem-fx-reduced *::after {
    animation: none !important;
    transition: none !important;
}

.ccem-fx-reduced .ccem-glow-layer {
    display: none;
}

/* Kafle ścieżek: zaznaczony kafel (ramka i powiększenie – nie sam kolor), pozostałe przygasają. */
.ccem-fx #tiles-container .tile-item {
    transition: opacity 0.4s ease, scale 0.4s ease;
}

.ccem-fx #tiles-container.ccem-has-selected .tile-item {
    opacity: 0.55;
}

.ccem-fx #tiles-container.ccem-has-selected .tile-item.ccem-tile-selected {
    opacity: 1;
    scale: 1.04;
}

.ccem-fx #tiles-container .tile-item.ccem-tile-selected .div_concave_border {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
}

/* Powitanie ścieżki: obraz odsłania się od lewej, potem nazwa, potem cena i przyciski. */
.ccem-fx .buy-image-container .buy-background-img {
    clip-path: inset(0 100% 0 0);
    translate: -30px 0;
    transition: clip-path 0.9s ease-out, translate 0.9s ease-out;
}

.ccem-fx .buy-image-container .buy-logo-section,
.ccem-fx .buy-image-container .buy-button-section {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.5s ease-out, translate 0.5s ease-out;
}

.ccem-fx .buy-image-container.is-revealed .buy-background-img {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
}

.ccem-fx .buy-image-container.is-revealed .buy-logo-section {
    opacity: 1;
    translate: 0 0;
    transition-delay: 0.5s;
}

.ccem-fx .buy-image-container.is-revealed .buy-button-section {
    opacity: 1;
    translate: 0 0;
    transition-delay: 0.8s;
}

/* „Parametry ścieżki”: sześciokąty wskakują po kolei (scale zamiast transform – transform ma już najechanie). */
.ccem-fx .ccem-hex {
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.4s ease-out, scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccem-fx .ccem-hex.is-in {
    opacity: 1;
    scale: 1;
}

/* Kreska pod nagłówkiem slajdu rysuje się od lewej. */
.ccem-fx .horizontal_line_black {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s ease-out 0.2s;
}

.ccem-fx .horizontal_line_black.is-drawn {
    transform: scaleX(1);
}