:root {
    /* Green */
    --green-base: #0F3D2E;
    --green-light: #226B52;
    --green-dark: #061A14; 
    --green-dark-tp: color-mix(in srgb, var(--green-dark), transparent 25%); 
    --green-dark-tp-50: color-mix(in srgb, var(--green-dark), transparent 50%);
    --green-dark-tp-60: color-mix(in srgb, var(--green-dark), transparent 60%); 

    /* Red */
    --red-intense: #bc2828;
    --red-dark: #4d0b0b;
    --gradient-red-did: linear-gradient(45deg, var(--red-dark) 0%, var(--red-intense) 15%, var(--red-dark) 100%);

    --gradient-green-page-long: linear-gradient(to bottom, var(--green-light) 0%, var(--green-base) 15%, var(--green-dark) 100%);
    --gradient-green-dbd: linear-gradient(to right, var(--green-dark) 0%, var(--green-base) 50%, var(--green-dark) 100%);
    --gradient-green-dbd-2: linear-gradient(to right, var(--green-dark) 0%, var(--green-base) 25%, var(--green-base) 75%, var(--green-dark) 100%);

    --gradient-green-blb: linear-gradient(to right, var(--green-base) 0%, var(--green-light) 50%, var(--green-base) 100%);
    --gradient-green-angle-lbd: linear-gradient(135deg, var(--green-light) 0%, var(--green-base) 40%, var(--green-dark) 100%);
    --gradient-green-dt: linear-gradient(to top, var(--green-dark) 0%, transparent 100%);
    --gradient-green-tdt: linear-gradient(to right, transparent 0%, var(--green-dark) 25%, var(--green-dark) 75%, transparent 100%);
    --gradient-green-td: linear-gradient(to bottom, transparent 0%, var(--green-dark-tp) 15%, var(--green-dark-tp) 85%, transparent 100%);
    
    --gradient-dark-tp: linear-gradient(135deg, var(--green-dark-tp-80) 0%, var(--gold-dark-tp-80) 50%, var(--green-dark-tp-80) 100%);

    /* Gold */
    --gold-base: #D4AF37;
    --gold-light: #FFF0A5;
    --gold-dark: #AA7C11;
    --gold-dark-tp-60: color-mix(in srgb, var(--gold-dark), transparent 60%); 

    --gradient-gold-dbl: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-base) 50%, var(--gold-light) 100%);
    --gradient-gold-blb: linear-gradient(45deg, var(--gold-base) 0%, var(--gold-light) 50%, var(--gold-base) 100%);
    --gradient-gold-dbd: linear-gradient(215deg, var(--gold-dark) 0%, var(--gold-base) 50%, var(--gold-dark) 100%);
    --gradient-gold-dbd-2: linear-gradient(to right, var(--gold-dark) 0%, var(--gold-base) 50%, var(--gold-dark) 100%);
    --gradient-gold-dbd-btm: linear-gradient(to bottom, var(--gold-dark) 0%, var(--gold-base) 50%, var(--gold-dark) 100%);
    --gradient-gold-td: linear-gradient(to bottom, transparent 0%, var(--gold-dark) 15%, var(--gold-dark) 85%, transparent 100%);
    
    --shimmer-gold-dbd-soft: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--gold-dark), transparent 90%) 25%, color-mix(in srgb, var(--gold-base), transparent 75%) 50%, color-mix(in srgb, var(--gold-dark), transparent 90%) 75%, transparent 100%);
    --shimmer-gold-dbd2-burn: linear-gradient(to right, transparent 15%, color-mix(in srgb, var(--gold-dark), transparent 85%) 40%, color-mix(in srgb, var(--gold-base), transparent 40%) 50%, color-mix(in srgb, var(--gold-dark), transparent 85%) 60%, transparent 85%);

    /* Silver */
    --silver-base: #C0C0C0;
    --silver-base-tp: color-mix(in srgb, var(--silver-base), transparent 25%); 
    --silver-light: #F2F2F2; 
    --silver-dark: #7A7A7A;

    --gradient-silver-dbl: linear-gradient(135deg, var(--silver-dark) 0%, var(--silver-base) 50%, var(--silver-light) 100%);
    --gradient-silver-blb: linear-gradient(45deg, var(--silver-base) 0%, var(--silver-light) 50%, var(--silver-base) 100%);
    --gradient-silver-dbd: linear-gradient(215deg, var(--silver-dark) 0%, var(--silver-base) 50%, var(--silver-dark) 100%);
    --gradient-silver-tbt: linear-gradient(to right, transparent 0%, var(--silver-base) 50%, transparent 100%);
    --gradient-silver-tbt2: linear-gradient(to right, transparent 0%, var(--silver-base) 20%, var(--silver-base) 80%, transparent 100%);

    --shimmer-silver-dbd-platinum: linear-gradient( to right, transparent 0%, color-mix(in srgb, var(--silver-dark), transparent 92%) 25%, color-mix(in srgb, var(--silver-base), #ffffff 70%) 50%, color-mix(in srgb, var(--silver-dark), transparent 92%) 75%, transparent 100%);
    --shimmer-silver-dbd-chrome: linear-gradient( to right, transparent 0%, color-mix(in srgb, var(--silver-dark), transparent 92%) 25%, color-mix(in srgb, var(--silver-base), #ffffff 70%) 50%, color-mix(in srgb, var(--silver-dark), transparent 92%) 75%, transparent 100%);

    /* Copper */
    --copper-base: #B87333;
    --copper-base-tp: color-mix(in srgb, var(--copper-base), transparent 50%); 
    --copper-light: #E29B5D; 
    --copper-dark: #804A1D;
    --copper-dark-tp: color-mix(in srgb, var(--copper-dark), transparent 50%); 

    --gradient-copper-dbl: linear-gradient(135deg, var(--copper-dark) 0%, var(--copper-base) 50%, var(--copper-light) 100%);
    --gradient-copper-blb: linear-gradient(45deg, var(--copper-base) 0%, var(--copper-light) 50%, var(--copper-base) 100%);
    --gradient-copper-dbd: linear-gradient(215deg, var(--copper-dark) 0%, var(--copper-base) 50%, var(--copper-dark) 100%);
    --gradient-copper-dbd-btm: linear-gradient(to bottom, var(--copper-base) 0%, var(--copper-dark) 50%, var(--copper-base) 100%);
    --gradient-copper-dbd-tp: linear-gradient(to bottom, var(--copper-dark-tp) 0%, var(--copper-base-tp) 50%, var(--copper-dark-tp) 100%);
    --gradient-copper-tbt: linear-gradient(to right, transparent 0%, var(--copper-base) 30%, var(--copper-base) 70%, transparent 100%);
    --gradient-copper-bdb: linear-gradient(to right, var(--copper-base) 0%, var(--copper-dark) 50%, var(--copper-base) 100%);
    
    --shimmer-copper-dbd-noble: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--copper-dark), transparent 85%) 25%, color-mix(in srgb, var(--copper-base), transparent 40%) 50%, color-mix(in srgb, var(--copper-dark), transparent 85%) 75%, transparent 100%);
    --shimmer-copper-gloss: linear-gradient( to right, transparent 15%, color-mix(in srgb, var(--copper-dark), transparent 70%) 35%, var(--copper-base) 47%, color-mix(in srgb, var(--copper-base), #fff5ea 40%) 50%, var(--copper-base) 53%, color-mix(in srgb, var(--copper-dark), transparent 70%) 65%, transparent 85% );

    /* Various */
    --grad-searchlight: radial-gradient(ellipse at center, transparent 50%, color-mix(in srgb, var(--overlay-bg), transparent 50%) 100%);
    --grad-black: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.4) 70%,  rgba(0, 0, 0, 0.8) 100%);
    --grad-black-lux: radial-gradient(circle at center, #2c2c2c 0%, #1a1a1a 100%);
    

    --gradient-gold-shine: radial-gradient(circle, 
        var(--gold-light) 0%, var(--gold-base) 70%, var(--gold-dark) 100%);
    --gradient-silver-shine: radial-gradient(circle, 
        var(--silver-light) 0%, var(--silver-base) 70%, var(--silver-dark) 100%);
    --gradient-silver-dark-shine: radial-gradient(circle, 
        var(--silver-dark) 0%, var(--silver-base) 70%, var(--silver-dark) 100%);
    --gradient-copper-shine: radial-gradient(circle, 
        var(--copper-light) 0%, var(--copper-base) 70%, var(--copper-dark) 100%);

    --gradient-silver-dark: linear-gradient(to right, var(--silver-base) 0%, var(--silver-base-tp) 10%, var(--green-dark) 30%, var(--green-dark) 60%, transparent 100%);
    
    /* Text */
    --color-text-gold: #c7bc8e; 
    --color-text-silver: #F2F2F2;
    --color-text-silver-dimm: #cfcfcf;
    --color-text-copper: #d9a066;

    /* Catalogue Colors */
    --cat-04_26-primary: #bc2828;
    --cat-04_26-primary-alt: #4d0b0b;
    --cat-04_26-secondary: #3766d4;
    --cat-04_26-secondary-alt: #414c8c;
    --gradient-cat-04_26-primary: linear-gradient(135deg, var(--cat-04_26-primary-alt) 0%, var(--cat-04_26-primary) 50%, var(--cat-04_26-primary-alt) 100%);
    --gradient-cat-04_26-secondary: linear-gradient(135deg, var(--cat-04_26-secondary-alt) 0%, var(--cat-04_26-secondary) 50%, var(--cat-04_26-secondary-alt) 100%);


    /* 10_26 */
    --cat-10_26-primary: #bf2083;
    --cat-10_26-primary-alt: #791b55;
    --cat-10_26-secondary: #5f9bd2;
    --cat-10_26-secondary-alt: #275e8f;

    --gradient-cat-10_26-primary: linear-gradient(135deg, var(--cat-10_26-primary-alt) 0%, var(--cat-10_26-primary) 50%, var(--cat-10_26-primary-alt) 100%);
    --gradient-cat-10_26-secondary: linear-gradient(135deg, var(--cat-10_26-secondary-alt) 0%, var(--cat-10_26-secondary) 50%, var(--cat-10_26-secondary-alt) 100%);

    /* Shortcut Variables */
    --nav-menu-bg: var(--gradient-green-dbd);
    --nav-menu-outer-border: var(--gold-base);
    --nav-sub-menu-bg: var(--green-base);
    --nav-menu-entry-border: var(--silver-base);
    --nav-menu-main-icon-color: var(--gold-base);
    --nav-menu-sub-icon-color: var(--gold-dark);
    --desktop-menu-btn-color: var(--gradient-copper-dbd-btm);


    --footer-bar-bg: var(--gradient-green-dbd-2);
    --footer-extra-bg: var(--gradient-green-page-long);

    --player-bg: var(--green-base);

    --join-btn-gradient: radial-gradient(circle, var(--red-dark) 0%, var(--red-intense) 50%);
    

}
.cat-04_26-primary path   { fill: url(#cat-04-primary) !important; }
.cat-10_26-primary path   { fill: url(#cat-10-primary) !important; }


.page-scroll {
    background: var(--gradient-green-page-long);
    background-attachment: scroll;
}
.page-fixed {
  background: var(--gradient-green-dbd);
  background-attachment: fixed;
}

.gradient-faq-hor {
    --overlay-color: var(--bg-card, var(--copper-dark));
    --overlay-color-tr-min: color-mix(in srgb, var(--overlay-color), transparent 25%);
    --overlay-color-tr-max: color-mix(in srgb, var(--overlay-color), transparent 50%);
    background: linear-gradient(
        to left,
        var(--overlay-color-tr-max) 0%,
        var(--overlay-color-tr-min) 20%,
        var(--overlay-color) 40%,
        var(--overlay-color) 60%,
        var(--overlay-color-tr-min) 80%,
        var(--overlay-color-tr-max) 100%
    );
}
.gradient-faq-hor-light {
    --overlay-color: var(--bg-card, var(--copper-dark));
    --overlay-color-tr-min: color-mix(in srgb, var(--overlay-color), transparent 25%);
    --overlay-color-tr-max: color-mix(in srgb, var(--overlay-color), transparent 50%);
    background: linear-gradient(
        to left,
        var(--overlay-color-tr-max) 0%,
        var(--overlay-color-tr-min) 10%,
        var(--overlay-color) 20%,
        var(--overlay-color) 80%,
        var(--overlay-color-tr-min) 90%,
        var(--overlay-color-tr-max) 100%
    );
}


.svg-grad-main-gold path { fill: url(#grad-gold) !important; }
.svg-grad-border-gold path { stroke: url(#grad-gold) !important; }

.svg-grad-main-silver path { fill: url(#grad-silver) !important; }
.svg-grad-border-silver path { stroke: url(#grad-silver) !important; }

.svg-grad-main-copper path { fill: url(#grad-copper) !important; }
.svg-grad-border-copper path { stroke: url(#grad-copper) !important; }

.svg-grad-main-red path { fill: url(#grad-red) !important; }
.svg-grad-border-red path { stroke: url(#grad-red) !important; }

.svg-grad-main-10_26-primary path   { fill: url(#10_26-primary) !important; }
.svg-grad-main-10_26-secondary path   { fill: url(#10_26-secondary) !important; }


.pd-grad-gold-a { background: var(--gold-base);}



.grad-t-color-t {
    --lead-color: var(--bg-color, var(--green-dark));
    --lead-color-tp-max: color-mix(in srgb, var(--lead-color), transparent 50%);
    --lead-color-tp-mid: color-mix(in srgb, var(--lead-color), transparent 33%);
    --lead-color-tp-min: color-mix(in srgb, var(--lead-color), transparent 10%);
    background: linear-gradient(to right,
        transparent 0%, var(--lead-color-tp-max) 15%, var(--lead-color-tp-mid) 25%, 
        var(--lead-color-tp-min) 50%, 
        var(--lead-color-tp-mid) 75%, var(--lead-color-tp-max) 85%, transparent 100%);
    /* background: linear-gradient(to right, transparent 0%, var(--lead-color) 25%, var(--lead-color) 75%, transparent 100%); */
}


.grad-custom-3 {
    background: linear-gradient(
        var(--deg, 45deg),
        var(--color_a, var(--copper-dark)) 0%,
        var(--color_b, var(--copper-base)) var(--grad-stop, 50%),
        var(--color_c, var(--copper-dark)) 100%
    );
}


.grad-side {
    background: linear-gradient(
        var(--deg, 45deg),
        var(--color-side, var(--green-dark)) 0%,
        var(--color-secondary, var(--copper-dark)) var(--grad-percent, 50%),
        var(--color-primary, var(--green-dark)) 100%
    );
}

.grad-catalogue {
    padding: var(--space-l) 0;
    background: linear-gradient(to right,
        transparent 0%,
        var(--color-secondary, red) var(--stop-left, 25%),
        var(--color-primary, green) 50%,
        var(--color-secondary, red) var(--stop-right, 75%),
        transparent 100%
    );
}

.grad-side-gold {
    background: linear-gradient(
        var(--deg, 45deg),
        var(--color-side, var(--copper-dark)) 0%,
        var(--color-secondary, var(--gold-dark)) var(--grad-percent, 50%),
        var(--color-primary, var(--copper-dark)) 100%
    );
}
.grad-side-silver {
    background: linear-gradient(
        var(--deg, 45deg),
        var(--color-side, var(--silver-base)) 0%,
        var(--color-secondary, var(--silver-dark)) var(--grad-percent, 50%),
        var(--color-primary, var(--silver-base)) 100%
    );
}


.grad-tp-green-gold {
    background: linear-gradient(
        var(--deg, 135deg),
        var(--green-dark-tp-60) 0%,
        var(--gold-dark-tp-60) 50%,
        var(--green-dark-tp-60) 100%);
}

.catalogue-number-bg {
    background: linear-gradient(to right, transparent 0%, var(--cat-04_26-secondary) 30%, var(--cat-04_26-secondary) 70%, transparent 100%);
}
.tp { background: transparent;}

.grad-line {
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--left-color, var(--silver-light)) var(--tp-step-1, 10%),
        var(--line-main, var(--silver-dark)) 50%,
        var(--right-color, var(--silver-light)) var(--tp-step-2, 90%),
        transparent 100%
    );
}

.fading-element {
    /* Задаем границы маски в виде градиента */
    -webkit-mask-image: linear-gradient(to top, transparent, black 10px, black calc(100% - 10px), transparent),
                        linear-gradient(to left, transparent, black 10px, black calc(100% - 10px), transparent);
    
    /* Совмещаем две маски (по вертикали и горизонтали) */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  
    /* То же самое без префиксов для стандартов */
    mask-image: linear-gradient(to top, transparent, black 10px, black calc(100% - 10px), transparent),
                linear-gradient(to left, transparent, black 10px, black calc(100% - 10px), transparent);
    mask-composite: intersect;
    z-index: var(--z-content);
  }