:root {
    color-scheme: light dark;
    
    /* Theme Container Max Width */
    --theme-container-max-width: 1440px;

    /* ============================================
       DEFAULT THEME VARIABLE
       ============================================ */
    
    /* Default Context */
    --default-bg-color: light-dark(#FFFFFF, #2A2A2A);
    --default-text-color: light-dark(#2A2A2A, #FFFFFF);
    --default-link-color: light-dark(#2A2A2A, #FFFFFF);
    --default-border-color: light-dark(#2A2A2A, #FFFFFF);
    
    /* Primary Context */
    --default-primary-bg-color: light-dark(#2A2A2A, #FFFFFF);
    --default-primary-text-color: light-dark(#FFFFFF, #2A2A2A);
    --default-primary-link-color: var(--default-link-color);
    --default-primary-border-color: light-dark(#2A2A2A, #FFFFFF);
    
    /* Secondary Context */
    --default-secondary-bg-color: var(--default-bg-color);
    --default-secondary-text-color: var(--default-text-color);
    --default-secondary-link-color: var(--default-link-color);
    --default-secondary-border-color: var(--default-border-color);

    /* Accent Colors */
    --default-accent-1-color: light-dark(#E3F2FD, #1A3A6B);
    --default-accent-2-color: light-dark(#FFF9D2, #7A6000);
    --default-accent-3-color: light-dark(#FFD6E0, #7A1040);
    --default-accent-4-color: light-dark(#E8F5E9, #1A4D2E);

    /* ============================================
       DEFAULT HOVER VARIABLE
       ============================================ */
    
    /* Default Context */
    --default-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-bg-color) 90%, black),
        color-mix(in srgb, var(--default-bg-color) 90%, white)
    );
    --default-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-text-color) 90%, white),
        color-mix(in srgb, var(--default-text-color) 90%, black)
    );
    --default-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-link-color) 70%, white),
        color-mix(in srgb, var(--default-link-color) 90%, black)
    );
    --default-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-border-color) 90%, white),
        color-mix(in srgb, var(--default-border-color) 90%, black)
    );
    
    /* Primary Context */
    --default-primary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-primary-bg-color) 90%, white),
        color-mix(in srgb, var(--default-primary-bg-color) 90%, black)
    );
    --default-primary-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-primary-text-color) 90%, black),
        color-mix(in srgb, var(--default-primary-text-color) 90%, white)
    );
    --default-primary-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-primary-link-color) 90%, black),
        color-mix(in srgb, var(--default-primary-link-color) 90%, white)
    );
    --default-primary-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-primary-border-color) 90%, white),
        color-mix(in srgb, var(--default-primary-border-color) 90%, black)
    );
    
    /* Secondary Context */
    --default-secondary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--default-secondary-bg-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-bg-color) 90%, black)
    );
    --default-secondary-hover-text-color: light-dark(
        color-mix(in srgb, var(--default-secondary-text-color) 90%, black),
        color-mix(in srgb, var(--default-secondary-text-color) 90%, white)
    );
    --default-secondary-hover-link-color: light-dark(
        color-mix(in srgb, var(--default-secondary-link-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-link-color) 90%, black)
    );
    --default-secondary-hover-border-color: light-dark(
        color-mix(in srgb, var(--default-secondary-border-color) 90%, white),
        color-mix(in srgb, var(--default-secondary-border-color) 90%, black)
    );
    
    /* ============================================
       HIGHLIGHT THEME VARIABLE
       ============================================ */
    
    /* Default Context (Highlight) */
    --highlight-bg-color: light-dark(#2A2A2A, #FFFFFF);
    --highlight-text-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-link-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-border-color: light-dark(#FFFFFF, #2A2A2A);
    
    /* Primary Context (Highlight) */
    --highlight-primary-bg-color: light-dark(#FFFFFF, #2A2A2A);
    --highlight-primary-text-color: light-dark(#2A2A2A, #FFFFFF);
    --highlight-primary-link-color: var(--highlight-link-color);
    --highlight-primary-border-color: light-dark(#FFFFFF, #2A2A2A);
    
    /* Secondary Context (Highlight) */
    --highlight-secondary-bg-color: var(--highlight-bg-color);
    --highlight-secondary-text-color: var(--highlight-text-color);
    --highlight-secondary-link-color: var(--highlight-link-color);
    --highlight-secondary-border-color: var(--highlight-border-color);

    /* Accent Colors (Highlight) */
    --highlight-accent-1-color: light-dark(#234FEB, #5B7FFF);
    --highlight-accent-2-color: light-dark(#FFC300, #FFD966);
    --highlight-accent-3-color: light-dark(#D6336C, #FF7BAD);
    --highlight-accent-4-color: light-dark(#257F4F, #57B37F);

    /* ============================================
       BACKGROUND COLOR LIGHTER & DARKER VARIABLES
       ============================================ */

    /* default bg color */
    --default-bg-color-lighter-10: color-mix(in srgb, var(--default-bg-color) 90%, white);
    --default-bg-color-lighter-20: color-mix(in srgb, var(--default-bg-color) 80%, white);
    --default-bg-color-lighter-30: color-mix(in srgb, var(--default-bg-color) 70%, white);
    --default-bg-color-lighter-40: color-mix(in srgb, var(--default-bg-color) 60%, white);
    --default-bg-color-lighter-50: color-mix(in srgb, var(--default-bg-color) 50%, white);
    --default-bg-color-lighter-60: color-mix(in srgb, var(--default-bg-color) 40%, white);
    --default-bg-color-lighter-70: color-mix(in srgb, var(--default-bg-color) 30%, white);
    --default-bg-color-lighter-80: color-mix(in srgb, var(--default-bg-color) 20%, white);
    --default-bg-color-lighter-90: color-mix(in srgb, var(--default-bg-color) 10%, white);
    --default-bg-color-lighter-100: color-mix(in srgb, var(--default-bg-color) 0%, white);
    --default-bg-color-darker-10: color-mix(in srgb, var(--default-bg-color) 90%, black);
    --default-bg-color-darker-20: color-mix(in srgb, var(--default-bg-color) 80%, black);
    --default-bg-color-darker-30: color-mix(in srgb, var(--default-bg-color) 70%, black);
    --default-bg-color-darker-40: color-mix(in srgb, var(--default-bg-color) 60%, black);
    --default-bg-color-darker-50: color-mix(in srgb, var(--default-bg-color) 50%, black);
    --default-bg-color-darker-60: color-mix(in srgb, var(--default-bg-color) 40%, black);
    --default-bg-color-darker-70: color-mix(in srgb, var(--default-bg-color) 30%, black);
    --default-bg-color-darker-80: color-mix(in srgb, var(--default-bg-color) 20%, black);
    --default-bg-color-darker-90: color-mix(in srgb, var(--default-bg-color) 10%, black);
    --default-bg-color-darker-100: color-mix(in srgb, var(--default-bg-color) 0%, black);

    /* default primary bg color */
    --default-primary-bg-color-lighter-10: color-mix(in srgb, var(--default-primary-bg-color) 90%, white);
    --default-primary-bg-color-lighter-20: color-mix(in srgb, var(--default-primary-bg-color) 80%, white);
    --default-primary-bg-color-lighter-30: color-mix(in srgb, var(--default-primary-bg-color) 70%, white);
    --default-primary-bg-color-lighter-40: color-mix(in srgb, var(--default-primary-bg-color) 60%, white);
    --default-primary-bg-color-lighter-50: color-mix(in srgb, var(--default-primary-bg-color) 50%, white);
    --default-primary-bg-color-lighter-60: color-mix(in srgb, var(--default-primary-bg-color) 40%, white);
    --default-primary-bg-color-lighter-70: color-mix(in srgb, var(--default-primary-bg-color) 30%, white);
    --default-primary-bg-color-lighter-80: color-mix(in srgb, var(--default-primary-bg-color) 20%, white);
    --default-primary-bg-color-lighter-90: color-mix(in srgb, var(--default-primary-bg-color) 10%, white);
    --default-primary-bg-color-lighter-100: color-mix(in srgb, var(--default-primary-bg-color) 0%, white);
    --default-primary-bg-color-darker-10: color-mix(in srgb, var(--default-primary-bg-color) 90%, black);
    --default-primary-bg-color-darker-20: color-mix(in srgb, var(--default-primary-bg-color) 80%, black);
    --default-primary-bg-color-darker-30: color-mix(in srgb, var(--default-primary-bg-color) 70%, black);
    --default-primary-bg-color-darker-40: color-mix(in srgb, var(--default-primary-bg-color) 60%, black);
    --default-primary-bg-color-darker-50: color-mix(in srgb, var(--default-primary-bg-color) 50%, black);
    --default-primary-bg-color-darker-60: color-mix(in srgb, var(--default-primary-bg-color) 40%, black);
    --default-primary-bg-color-darker-70: color-mix(in srgb, var(--default-primary-bg-color) 30%, black);
    --default-primary-bg-color-darker-80: color-mix(in srgb, var(--default-primary-bg-color) 20%, black);
    --default-primary-bg-color-darker-90: color-mix(in srgb, var(--default-primary-bg-color) 10%, black);
    --default-primary-bg-color-darker-100: color-mix(in srgb, var(--default-primary-bg-color) 0%, black);

    /* default secondary bg color */
    --default-secondary-bg-color-lighter-10: color-mix(in srgb, var(--default-secondary-bg-color) 90%, white);
    --default-secondary-bg-color-lighter-20: color-mix(in srgb, var(--default-secondary-bg-color) 80%, white);
    --default-secondary-bg-color-lighter-30: color-mix(in srgb, var(--default-secondary-bg-color) 70%, white);
    --default-secondary-bg-color-lighter-40: color-mix(in srgb, var(--default-secondary-bg-color) 60%, white);
    --default-secondary-bg-color-lighter-50: color-mix(in srgb, var(--default-secondary-bg-color) 50%, white);
    --default-secondary-bg-color-lighter-60: color-mix(in srgb, var(--default-secondary-bg-color) 40%, white);
    --default-secondary-bg-color-lighter-70: color-mix(in srgb, var(--default-secondary-bg-color) 30%, white);
    --default-secondary-bg-color-lighter-80: color-mix(in srgb, var(--default-secondary-bg-color) 20%, white);
    --default-secondary-bg-color-lighter-90: color-mix(in srgb, var(--default-secondary-bg-color) 10%, white);
    --default-secondary-bg-color-lighter-100: color-mix(in srgb, var(--default-secondary-bg-color) 0%, white);
    --default-secondary-bg-color-darker-10: color-mix(in srgb, var(--default-secondary-bg-color) 90%, black);
    --default-secondary-bg-color-darker-20: color-mix(in srgb, var(--default-secondary-bg-color) 80%, black);
    --default-secondary-bg-color-darker-30: color-mix(in srgb, var(--default-secondary-bg-color) 70%, black);
    --default-secondary-bg-color-darker-40: color-mix(in srgb, var(--default-secondary-bg-color) 60%, black);
    --default-secondary-bg-color-darker-50: color-mix(in srgb, var(--default-secondary-bg-color) 50%, black);
    --default-secondary-bg-color-darker-60: color-mix(in srgb, var(--default-secondary-bg-color) 40%, black);
    --default-secondary-bg-color-darker-70: color-mix(in srgb, var(--default-secondary-bg-color) 30%, black);
    --default-secondary-bg-color-darker-80: color-mix(in srgb, var(--default-secondary-bg-color) 20%, black);
    --default-secondary-bg-color-darker-90: color-mix(in srgb, var(--default-secondary-bg-color) 10%, black);
    --default-secondary-bg-color-darker-100: color-mix(in srgb, var(--default-secondary-bg-color) 0%, black);

    /* highlight bg color */
    --highlight-bg-color-lighter-10: color-mix(in srgb, var(--highlight-bg-color) 90%, white);
    --highlight-bg-color-lighter-20: color-mix(in srgb, var(--highlight-bg-color) 80%, white);
    --highlight-bg-color-lighter-30: color-mix(in srgb, var(--highlight-bg-color) 70%, white);
    --highlight-bg-color-lighter-40: color-mix(in srgb, var(--highlight-bg-color) 60%, white);
    --highlight-bg-color-lighter-50: color-mix(in srgb, var(--highlight-bg-color) 50%, white);
    --highlight-bg-color-lighter-60: color-mix(in srgb, var(--highlight-bg-color) 40%, white);
    --highlight-bg-color-lighter-70: color-mix(in srgb, var(--highlight-bg-color) 30%, white);
    --highlight-bg-color-lighter-80: color-mix(in srgb, var(--highlight-bg-color) 20%, white);
    --highlight-bg-color-lighter-90: color-mix(in srgb, var(--highlight-bg-color) 10%, white);
    --highlight-bg-color-lighter-100: color-mix(in srgb, var(--highlight-bg-color) 0%, white);
    --highlight-bg-color-darker-10: color-mix(in srgb, var(--highlight-bg-color) 90%, black);
    --highlight-bg-color-darker-20: color-mix(in srgb, var(--highlight-bg-color) 80%, black);
    --highlight-bg-color-darker-30: color-mix(in srgb, var(--highlight-bg-color) 70%, black);
    --highlight-bg-color-darker-40: color-mix(in srgb, var(--highlight-bg-color) 60%, black);
    --highlight-bg-color-darker-50: color-mix(in srgb, var(--highlight-bg-color) 50%, black);
    --highlight-bg-color-darker-60: color-mix(in srgb, var(--highlight-bg-color) 40%, black);
    --highlight-bg-color-darker-70: color-mix(in srgb, var(--highlight-bg-color) 30%, black);
    --highlight-bg-color-darker-80: color-mix(in srgb, var(--highlight-bg-color) 20%, black);
    --highlight-bg-color-darker-90: color-mix(in srgb, var(--highlight-bg-color) 10%, black);
    --highlight-bg-color-darker-100: color-mix(in srgb, var(--highlight-bg-color) 0%, black);

    /* highlight primary bg color */
    --highlight-primary-bg-color-lighter-10: color-mix(in srgb, var(--highlight-primary-bg-color) 90%, white);
    --highlight-primary-bg-color-lighter-20: color-mix(in srgb, var(--highlight-primary-bg-color) 80%, white);
    --highlight-primary-bg-color-lighter-30: color-mix(in srgb, var(--highlight-primary-bg-color) 70%, white);
    --highlight-primary-bg-color-lighter-40: color-mix(in srgb, var(--highlight-primary-bg-color) 60%, white);
    --highlight-primary-bg-color-lighter-50: color-mix(in srgb, var(--highlight-primary-bg-color) 50%, white);
    --highlight-primary-bg-color-lighter-60: color-mix(in srgb, var(--highlight-primary-bg-color) 40%, white);
    --highlight-primary-bg-color-lighter-70: color-mix(in srgb, var(--highlight-primary-bg-color) 30%, white);
    --highlight-primary-bg-color-lighter-80: color-mix(in srgb, var(--highlight-primary-bg-color) 20%, white);
    --highlight-primary-bg-color-lighter-90: color-mix(in srgb, var(--highlight-primary-bg-color) 10%, white);
    --highlight-primary-bg-color-lighter-100: color-mix(in srgb, var(--highlight-primary-bg-color) 0%, white);
    --highlight-primary-bg-color-darker-10: color-mix(in srgb, var(--highlight-primary-bg-color) 90%, black);
    --highlight-primary-bg-color-darker-20: color-mix(in srgb, var(--highlight-primary-bg-color) 80%, black);
    --highlight-primary-bg-color-darker-30: color-mix(in srgb, var(--highlight-primary-bg-color) 70%, black);
    --highlight-primary-bg-color-darker-40: color-mix(in srgb, var(--highlight-primary-bg-color) 60%, black);
    --highlight-primary-bg-color-darker-50: color-mix(in srgb, var(--highlight-primary-bg-color) 50%, black);
    --highlight-primary-bg-color-darker-60: color-mix(in srgb, var(--highlight-primary-bg-color) 40%, black);
    --highlight-primary-bg-color-darker-70: color-mix(in srgb, var(--highlight-primary-bg-color) 30%, black);
    --highlight-primary-bg-color-darker-80: color-mix(in srgb, var(--highlight-primary-bg-color) 20%, black);
    --highlight-primary-bg-color-darker-90: color-mix(in srgb, var(--highlight-primary-bg-color) 10%, black);
    --highlight-primary-bg-color-darker-100: color-mix(in srgb, var(--highlight-primary-bg-color) 0%, black);

    /* highlight secondary bg color */
    --highlight-secondary-bg-color-lighter-10: color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, white);
    --highlight-secondary-bg-color-lighter-20: color-mix(in srgb, var(--highlight-secondary-bg-color) 80%, white);
    --highlight-secondary-bg-color-lighter-30: color-mix(in srgb, var(--highlight-secondary-bg-color) 70%, white);
    --highlight-secondary-bg-color-lighter-40: color-mix(in srgb, var(--highlight-secondary-bg-color) 60%, white);
    --highlight-secondary-bg-color-lighter-50: color-mix(in srgb, var(--highlight-secondary-bg-color) 50%, white);
    --highlight-secondary-bg-color-lighter-60: color-mix(in srgb, var(--highlight-secondary-bg-color) 40%, white);
    --highlight-secondary-bg-color-lighter-70: color-mix(in srgb, var(--highlight-secondary-bg-color) 30%, white);
    --highlight-secondary-bg-color-lighter-80: color-mix(in srgb, var(--highlight-secondary-bg-color) 20%, white);
    --highlight-secondary-bg-color-lighter-90: color-mix(in srgb, var(--highlight-secondary-bg-color) 10%, white);
    --highlight-secondary-bg-color-lighter-100: color-mix(in srgb, var(--highlight-secondary-bg-color) 0%, white);
    --highlight-secondary-bg-color-darker-10: color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, black);
    --highlight-secondary-bg-color-darker-20: color-mix(in srgb, var(--highlight-secondary-bg-color) 80%, black);
    --highlight-secondary-bg-color-darker-30: color-mix(in srgb, var(--highlight-secondary-bg-color) 70%, black);
    --highlight-secondary-bg-color-darker-40: color-mix(in srgb, var(--highlight-secondary-bg-color) 60%, black);
    --highlight-secondary-bg-color-darker-50: color-mix(in srgb, var(--highlight-secondary-bg-color) 50%, black);
    --highlight-secondary-bg-color-darker-60: color-mix(in srgb, var(--highlight-secondary-bg-color) 40%, black);
    --highlight-secondary-bg-color-darker-70: color-mix(in srgb, var(--highlight-secondary-bg-color) 30%, black);
    --highlight-secondary-bg-color-darker-80: color-mix(in srgb, var(--highlight-secondary-bg-color) 20%, black);
    --highlight-secondary-bg-color-darker-90: color-mix(in srgb, var(--highlight-secondary-bg-color) 10%, black);
    --highlight-secondary-bg-color-darker-100: color-mix(in srgb, var(--highlight-secondary-bg-color) 0%, black);

    /* default accent 1 color */
    --default-accent-1-color-lighter-10: color-mix(in srgb, var(--default-accent-1-color) 90%, white);
    --default-accent-1-color-lighter-20: color-mix(in srgb, var(--default-accent-1-color) 80%, white);
    --default-accent-1-color-lighter-30: color-mix(in srgb, var(--default-accent-1-color) 70%, white);
    --default-accent-1-color-lighter-40: color-mix(in srgb, var(--default-accent-1-color) 60%, white);
    --default-accent-1-color-lighter-50: color-mix(in srgb, var(--default-accent-1-color) 50%, white);
    --default-accent-1-color-lighter-60: color-mix(in srgb, var(--default-accent-1-color) 40%, white);
    --default-accent-1-color-lighter-70: color-mix(in srgb, var(--default-accent-1-color) 30%, white);
    --default-accent-1-color-lighter-80: color-mix(in srgb, var(--default-accent-1-color) 20%, white);
    --default-accent-1-color-lighter-90: color-mix(in srgb, var(--default-accent-1-color) 10%, white);
    --default-accent-1-color-lighter-100: color-mix(in srgb, var(--default-accent-1-color) 0%, white);
    --default-accent-1-color-darker-10: color-mix(in srgb, var(--default-accent-1-color) 90%, black);
    --default-accent-1-color-darker-20: color-mix(in srgb, var(--default-accent-1-color) 80%, black);
    --default-accent-1-color-darker-30: color-mix(in srgb, var(--default-accent-1-color) 70%, black);
    --default-accent-1-color-darker-40: color-mix(in srgb, var(--default-accent-1-color) 60%, black);
    --default-accent-1-color-darker-50: color-mix(in srgb, var(--default-accent-1-color) 50%, black);
    --default-accent-1-color-darker-60: color-mix(in srgb, var(--default-accent-1-color) 40%, black);
    --default-accent-1-color-darker-70: color-mix(in srgb, var(--default-accent-1-color) 30%, black);
    --default-accent-1-color-darker-80: color-mix(in srgb, var(--default-accent-1-color) 20%, black);
    --default-accent-1-color-darker-90: color-mix(in srgb, var(--default-accent-1-color) 10%, black);
    --default-accent-1-color-darker-100: color-mix(in srgb, var(--default-accent-1-color) 0%, black);

    /* default accent 2 color */
    --default-accent-2-color-lighter-10: color-mix(in srgb, var(--default-accent-2-color) 90%, white);
    --default-accent-2-color-lighter-20: color-mix(in srgb, var(--default-accent-2-color) 80%, white);
    --default-accent-2-color-lighter-30: color-mix(in srgb, var(--default-accent-2-color) 70%, white);
    --default-accent-2-color-lighter-40: color-mix(in srgb, var(--default-accent-2-color) 60%, white);
    --default-accent-2-color-lighter-50: color-mix(in srgb, var(--default-accent-2-color) 50%, white);
    --default-accent-2-color-lighter-60: color-mix(in srgb, var(--default-accent-2-color) 40%, white);
    --default-accent-2-color-lighter-70: color-mix(in srgb, var(--default-accent-2-color) 30%, white);
    --default-accent-2-color-lighter-80: color-mix(in srgb, var(--default-accent-2-color) 20%, white);
    --default-accent-2-color-lighter-90: color-mix(in srgb, var(--default-accent-2-color) 10%, white);
    --default-accent-2-color-lighter-100: color-mix(in srgb, var(--default-accent-2-color) 0%, white);
    --default-accent-2-color-darker-10: color-mix(in srgb, var(--default-accent-2-color) 90%, black);
    --default-accent-2-color-darker-20: color-mix(in srgb, var(--default-accent-2-color) 80%, black);
    --default-accent-2-color-darker-30: color-mix(in srgb, var(--default-accent-2-color) 70%, black);
    --default-accent-2-color-darker-40: color-mix(in srgb, var(--default-accent-2-color) 60%, black);
    --default-accent-2-color-darker-50: color-mix(in srgb, var(--default-accent-2-color) 50%, black);
    --default-accent-2-color-darker-60: color-mix(in srgb, var(--default-accent-2-color) 40%, black);
    --default-accent-2-color-darker-70: color-mix(in srgb, var(--default-accent-2-color) 30%, black);
    --default-accent-2-color-darker-80: color-mix(in srgb, var(--default-accent-2-color) 20%, black);
    --default-accent-2-color-darker-90: color-mix(in srgb, var(--default-accent-2-color) 10%, black);
    --default-accent-2-color-darker-100: color-mix(in srgb, var(--default-accent-2-color) 0%, black);

    /* default accent 3 color */
    --default-accent-3-color-lighter-10: color-mix(in srgb, var(--default-accent-3-color) 90%, white);
    --default-accent-3-color-lighter-20: color-mix(in srgb, var(--default-accent-3-color) 80%, white);
    --default-accent-3-color-lighter-30: color-mix(in srgb, var(--default-accent-3-color) 70%, white);
    --default-accent-3-color-lighter-40: color-mix(in srgb, var(--default-accent-3-color) 60%, white);
    --default-accent-3-color-lighter-50: color-mix(in srgb, var(--default-accent-3-color) 50%, white);
    --default-accent-3-color-lighter-60: color-mix(in srgb, var(--default-accent-3-color) 40%, white);
    --default-accent-3-color-lighter-70: color-mix(in srgb, var(--default-accent-3-color) 30%, white);
    --default-accent-3-color-lighter-80: color-mix(in srgb, var(--default-accent-3-color) 20%, white);
    --default-accent-3-color-lighter-90: color-mix(in srgb, var(--default-accent-3-color) 10%, white);
    --default-accent-3-color-lighter-100: color-mix(in srgb, var(--default-accent-3-color) 0%, white);
    --default-accent-3-color-darker-10: color-mix(in srgb, var(--default-accent-3-color) 90%, black);
    --default-accent-3-color-darker-20: color-mix(in srgb, var(--default-accent-3-color) 80%, black);
    --default-accent-3-color-darker-30: color-mix(in srgb, var(--default-accent-3-color) 70%, black);
    --default-accent-3-color-darker-40: color-mix(in srgb, var(--default-accent-3-color) 60%, black);
    --default-accent-3-color-darker-50: color-mix(in srgb, var(--default-accent-3-color) 50%, black);
    --default-accent-3-color-darker-60: color-mix(in srgb, var(--default-accent-3-color) 40%, black);
    --default-accent-3-color-darker-70: color-mix(in srgb, var(--default-accent-3-color) 30%, black);
    --default-accent-3-color-darker-80: color-mix(in srgb, var(--default-accent-3-color) 20%, black);
    --default-accent-3-color-darker-90: color-mix(in srgb, var(--default-accent-3-color) 10%, black);
    --default-accent-3-color-darker-100: color-mix(in srgb, var(--default-accent-3-color) 0%, black);

    /* default accent 4 color */
    --default-accent-4-color-lighter-10: color-mix(in srgb, var(--default-accent-4-color) 90%, white);
    --default-accent-4-color-lighter-20: color-mix(in srgb, var(--default-accent-4-color) 80%, white);
    --default-accent-4-color-lighter-30: color-mix(in srgb, var(--default-accent-4-color) 70%, white);
    --default-accent-4-color-lighter-40: color-mix(in srgb, var(--default-accent-4-color) 60%, white);
    --default-accent-4-color-lighter-50: color-mix(in srgb, var(--default-accent-4-color) 50%, white);
    --default-accent-4-color-lighter-60: color-mix(in srgb, var(--default-accent-4-color) 40%, white);
    --default-accent-4-color-lighter-70: color-mix(in srgb, var(--default-accent-4-color) 30%, white);
    --default-accent-4-color-lighter-80: color-mix(in srgb, var(--default-accent-4-color) 20%, white);
    --default-accent-4-color-lighter-90: color-mix(in srgb, var(--default-accent-4-color) 10%, white);
    --default-accent-4-color-lighter-100: color-mix(in srgb, var(--default-accent-4-color) 0%, white);
    --default-accent-4-color-darker-10: color-mix(in srgb, var(--default-accent-4-color) 90%, black);
    --default-accent-4-color-darker-20: color-mix(in srgb, var(--default-accent-4-color) 80%, black);
    --default-accent-4-color-darker-30: color-mix(in srgb, var(--default-accent-4-color) 70%, black);
    --default-accent-4-color-darker-40: color-mix(in srgb, var(--default-accent-4-color) 60%, black);
    --default-accent-4-color-darker-50: color-mix(in srgb, var(--default-accent-4-color) 50%, black);
    --default-accent-4-color-darker-60: color-mix(in srgb, var(--default-accent-4-color) 40%, black);
    --default-accent-4-color-darker-70: color-mix(in srgb, var(--default-accent-4-color) 30%, black);
    --default-accent-4-color-darker-80: color-mix(in srgb, var(--default-accent-4-color) 20%, black);
    --default-accent-4-color-darker-90: color-mix(in srgb, var(--default-accent-4-color) 10%, black);
    --default-accent-4-color-darker-100: color-mix(in srgb, var(--default-accent-4-color) 0%, black);

    /* highlight accent 1 color */
    --highlight-accent-1-color-lighter-10: color-mix(in srgb, var(--highlight-accent-1-color) 90%, white);
    --highlight-accent-1-color-lighter-20: color-mix(in srgb, var(--highlight-accent-1-color) 80%, white);
    --highlight-accent-1-color-lighter-30: color-mix(in srgb, var(--highlight-accent-1-color) 70%, white);
    --highlight-accent-1-color-lighter-40: color-mix(in srgb, var(--highlight-accent-1-color) 60%, white);
    --highlight-accent-1-color-lighter-50: color-mix(in srgb, var(--highlight-accent-1-color) 50%, white);
    --highlight-accent-1-color-lighter-60: color-mix(in srgb, var(--highlight-accent-1-color) 40%, white);
    --highlight-accent-1-color-lighter-70: color-mix(in srgb, var(--highlight-accent-1-color) 30%, white);
    --highlight-accent-1-color-lighter-80: color-mix(in srgb, var(--highlight-accent-1-color) 20%, white);
    --highlight-accent-1-color-lighter-90: color-mix(in srgb, var(--highlight-accent-1-color) 10%, white);
    --highlight-accent-1-color-lighter-100: color-mix(in srgb, var(--highlight-accent-1-color) 0%, white);
    --highlight-accent-1-color-darker-10: color-mix(in srgb, var(--highlight-accent-1-color) 90%, black);
    --highlight-accent-1-color-darker-20: color-mix(in srgb, var(--highlight-accent-1-color) 80%, black);
    --highlight-accent-1-color-darker-30: color-mix(in srgb, var(--highlight-accent-1-color) 70%, black);
    --highlight-accent-1-color-darker-40: color-mix(in srgb, var(--highlight-accent-1-color) 60%, black);
    --highlight-accent-1-color-darker-50: color-mix(in srgb, var(--highlight-accent-1-color) 50%, black);
    --highlight-accent-1-color-darker-60: color-mix(in srgb, var(--highlight-accent-1-color) 40%, black);
    --highlight-accent-1-color-darker-70: color-mix(in srgb, var(--highlight-accent-1-color) 30%, black);
    --highlight-accent-1-color-darker-80: color-mix(in srgb, var(--highlight-accent-1-color) 20%, black);
    --highlight-accent-1-color-darker-90: color-mix(in srgb, var(--highlight-accent-1-color) 10%, black);
    --highlight-accent-1-color-darker-100: color-mix(in srgb, var(--highlight-accent-1-color) 0%, black);

    /* highlight accent 2 color */
    --highlight-accent-2-color-lighter-10: color-mix(in srgb, var(--highlight-accent-2-color) 90%, white);
    --highlight-accent-2-color-lighter-20: color-mix(in srgb, var(--highlight-accent-2-color) 80%, white);
    --highlight-accent-2-color-lighter-30: color-mix(in srgb, var(--highlight-accent-2-color) 70%, white);
    --highlight-accent-2-color-lighter-40: color-mix(in srgb, var(--highlight-accent-2-color) 60%, white);
    --highlight-accent-2-color-lighter-50: color-mix(in srgb, var(--highlight-accent-2-color) 50%, white);
    --highlight-accent-2-color-lighter-60: color-mix(in srgb, var(--highlight-accent-2-color) 40%, white);
    --highlight-accent-2-color-lighter-70: color-mix(in srgb, var(--highlight-accent-2-color) 30%, white);
    --highlight-accent-2-color-lighter-80: color-mix(in srgb, var(--highlight-accent-2-color) 20%, white);
    --highlight-accent-2-color-lighter-90: color-mix(in srgb, var(--highlight-accent-2-color) 10%, white);
    --highlight-accent-2-color-lighter-100: color-mix(in srgb, var(--highlight-accent-2-color) 0%, white);
    --highlight-accent-2-color-darker-10: color-mix(in srgb, var(--highlight-accent-2-color) 90%, black);
    --highlight-accent-2-color-darker-20: color-mix(in srgb, var(--highlight-accent-2-color) 80%, black);
    --highlight-accent-2-color-darker-30: color-mix(in srgb, var(--highlight-accent-2-color) 70%, black);
    --highlight-accent-2-color-darker-40: color-mix(in srgb, var(--highlight-accent-2-color) 60%, black);
    --highlight-accent-2-color-darker-50: color-mix(in srgb, var(--highlight-accent-2-color) 50%, black);
    --highlight-accent-2-color-darker-60: color-mix(in srgb, var(--highlight-accent-2-color) 40%, black);
    --highlight-accent-2-color-darker-70: color-mix(in srgb, var(--highlight-accent-2-color) 30%, black);
    --highlight-accent-2-color-darker-80: color-mix(in srgb, var(--highlight-accent-2-color) 20%, black);
    --highlight-accent-2-color-darker-90: color-mix(in srgb, var(--highlight-accent-2-color) 10%, black);
    --highlight-accent-2-color-darker-100: color-mix(in srgb, var(--highlight-accent-2-color) 0%, black);

    /* highlight accent 3 color */
    --highlight-accent-3-color-lighter-10: color-mix(in srgb, var(--highlight-accent-3-color) 90%, white);
    --highlight-accent-3-color-lighter-20: color-mix(in srgb, var(--highlight-accent-3-color) 80%, white);
    --highlight-accent-3-color-lighter-30: color-mix(in srgb, var(--highlight-accent-3-color) 70%, white);
    --highlight-accent-3-color-lighter-40: color-mix(in srgb, var(--highlight-accent-3-color) 60%, white);
    --highlight-accent-3-color-lighter-50: color-mix(in srgb, var(--highlight-accent-3-color) 50%, white);
    --highlight-accent-3-color-lighter-60: color-mix(in srgb, var(--highlight-accent-3-color) 40%, white);
    --highlight-accent-3-color-lighter-70: color-mix(in srgb, var(--highlight-accent-3-color) 30%, white);
    --highlight-accent-3-color-lighter-80: color-mix(in srgb, var(--highlight-accent-3-color) 20%, white);
    --highlight-accent-3-color-lighter-90: color-mix(in srgb, var(--highlight-accent-3-color) 10%, white);
    --highlight-accent-3-color-lighter-100: color-mix(in srgb, var(--highlight-accent-3-color) 0%, white);
    --highlight-accent-3-color-darker-10: color-mix(in srgb, var(--highlight-accent-3-color) 90%, black);
    --highlight-accent-3-color-darker-20: color-mix(in srgb, var(--highlight-accent-3-color) 80%, black);
    --highlight-accent-3-color-darker-30: color-mix(in srgb, var(--highlight-accent-3-color) 70%, black);
    --highlight-accent-3-color-darker-40: color-mix(in srgb, var(--highlight-accent-3-color) 60%, black);
    --highlight-accent-3-color-darker-50: color-mix(in srgb, var(--highlight-accent-3-color) 50%, black);
    --highlight-accent-3-color-darker-60: color-mix(in srgb, var(--highlight-accent-3-color) 40%, black);
    --highlight-accent-3-color-darker-70: color-mix(in srgb, var(--highlight-accent-3-color) 30%, black);
    --highlight-accent-3-color-darker-80: color-mix(in srgb, var(--highlight-accent-3-color) 20%, black);
    --highlight-accent-3-color-darker-90: color-mix(in srgb, var(--highlight-accent-3-color) 10%, black);
    --highlight-accent-3-color-darker-100: color-mix(in srgb, var(--highlight-accent-3-color) 0%, black);

    /* highlight accent 4 color */
    --highlight-accent-4-color-lighter-10: color-mix(in srgb, var(--highlight-accent-4-color) 90%, white);
    --highlight-accent-4-color-lighter-20: color-mix(in srgb, var(--highlight-accent-4-color) 80%, white);
    --highlight-accent-4-color-lighter-30: color-mix(in srgb, var(--highlight-accent-4-color) 70%, white);
    --highlight-accent-4-color-lighter-40: color-mix(in srgb, var(--highlight-accent-4-color) 60%, white);
    --highlight-accent-4-color-lighter-50: color-mix(in srgb, var(--highlight-accent-4-color) 50%, white);
    --highlight-accent-4-color-lighter-60: color-mix(in srgb, var(--highlight-accent-4-color) 40%, white);
    --highlight-accent-4-color-lighter-70: color-mix(in srgb, var(--highlight-accent-4-color) 30%, white);
    --highlight-accent-4-color-lighter-80: color-mix(in srgb, var(--highlight-accent-4-color) 20%, white);
    --highlight-accent-4-color-lighter-90: color-mix(in srgb, var(--highlight-accent-4-color) 10%, white);
    --highlight-accent-4-color-lighter-100: color-mix(in srgb, var(--highlight-accent-4-color) 0%, white);
    --highlight-accent-4-color-darker-10: color-mix(in srgb, var(--highlight-accent-4-color) 90%, black);
    --highlight-accent-4-color-darker-20: color-mix(in srgb, var(--highlight-accent-4-color) 80%, black);
    --highlight-accent-4-color-darker-30: color-mix(in srgb, var(--highlight-accent-4-color) 70%, black);
    --highlight-accent-4-color-darker-40: color-mix(in srgb, var(--highlight-accent-4-color) 60%, black);
    --highlight-accent-4-color-darker-50: color-mix(in srgb, var(--highlight-accent-4-color) 50%, black);
    --highlight-accent-4-color-darker-60: color-mix(in srgb, var(--highlight-accent-4-color) 40%, black);
    --highlight-accent-4-color-darker-70: color-mix(in srgb, var(--highlight-accent-4-color) 30%, black);
    --highlight-accent-4-color-darker-80: color-mix(in srgb, var(--highlight-accent-4-color) 20%, black);
    --highlight-accent-4-color-darker-90: color-mix(in srgb, var(--highlight-accent-4-color) 10%, black);
    --highlight-accent-4-color-darker-100: color-mix(in srgb, var(--highlight-accent-4-color) 0%, black);

    /* ============================================
       HIGHLIGHT THEME HOVER VARIABLE
       ============================================ */
    
    /* Default Context (Highlight) */
    --highlight-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-bg-color) 90%, white),
        color-mix(in srgb, var(--highlight-bg-color) 90%, black)
    );
    --highlight-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-text-color) 90%, black),
        color-mix(in srgb, var(--highlight-text-color) 90%, white)
    );
    --highlight-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-link-color) 90%, black),
        color-mix(in srgb, var(--highlight-link-color) 90%, white)
    );
    --highlight-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-border-color) 90%, white)
    );
    
    /* Primary Context (Highlight) */
    --highlight-primary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-bg-color) 90%, black),
        color-mix(in srgb, var(--highlight-primary-bg-color) 90%, white)
    );
    --highlight-primary-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-text-color) 90%, white),
        color-mix(in srgb, var(--highlight-primary-text-color) 90%, black)
    );
    --highlight-primary-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-link-color) 90%, white),
        color-mix(in srgb, var(--highlight-primary-link-color) 90%, black)
    );
    --highlight-primary-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-primary-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-primary-border-color) 90%, white)
    );
    
    /* Secondary Context (Highlight) */
    --highlight-secondary-hover-bg-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, white),
        color-mix(in srgb, var(--highlight-secondary-bg-color) 90%, black)
    );
    --highlight-secondary-hover-text-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-text-color) 90%, black),
        color-mix(in srgb, var(--highlight-secondary-text-color) 90%, white)
    );
    --highlight-secondary-hover-link-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-link-color) 90%, white),
        color-mix(in srgb, var(--highlight-secondary-link-color) 90%, black)
    );
    --highlight-secondary-hover-border-color: light-dark(
        color-mix(in srgb, var(--highlight-secondary-border-color) 90%, black),
        color-mix(in srgb, var(--highlight-secondary-border-color) 90%, white)
    );

    /* Default Typo Variables */
    --default-font-family: 'open-sans', sans-serif;
    --default-heading-font-family: 'open-sans', sans-serif;
    --default-text-size: 16px;
    --default-text-transform: none;
    --default-font-weight: normal;
    --default-line-height: 1.8;
    --default-letter-spacing: normal;
    --default-bg-image: none;
    --default-bg-image-position: center center;
    --default-bg-image-size: cover;
    --default-bg-image-repeat: no-repeat;
    --default-bg-image-attachment: fixed;

    /* === SPACING TOKENS === */
    --space-0: 0em;      /* 0px  */
    --space-1: 0.125em;  /* 2px  */
    --space-2: 0.25em;   /* 4.5px */
    --space-3: 0.375em;  /* 6.75px */
    --space-4: 0.5em;    /* 9px */
    --space-5: 0.75em;   /* 13.5px */
    --space-6: 1em;      /* 18px base */
    --space-7: 1.25em;   /* 22.5px */
    --space-8: 1.5em;    /* 27px */
    --space-9: 1.75em;   /* 31.5px */
    --space-10: 2em;     /* 36px */
    --space-11: 2.5em;   /* 45px */
    --space-12: 3em;     /* 54px */
    --space-13: 4em;     /* 72px */

    /* === FONT SIZE TOKENS === */
    --fs-1: 0.5em;   /* 9px */
    --fs-2: 0.75em;  /* 13.5px */
    --fs-3: 0.875em; /* 15.75px */
    --fs-4: 1em;     /* 18px */
    --fs-5: 1.125em; /* 20.25px */
    --fs-6: 1.25em;  /* 22.5px */
    --fs-7: 1.5em;   /* 27px */
    --fs-8: 1.75em;  /* 31.5px */
    --fs-9: 2em;     /* 36px */
    --fs-10: 2.25em; /* 40.5px */
    --fs-11: 2.5em;  /* 45px */
    --fs-12: 2.75em; /* 49.5px */
    --fs-13: 3em;    /* 54px */
    --fs-14: 3.5em;  /* 63px */

    /* === BORDER RADIUS TOKENS === */
    --radius-0: 0em;     /* 0px */
    --radius-1: 0.125em; /* 2px */
    --radius-2: 0.25em;  /* 4.5px */
    --radius-3: 0.375em; /* 6.75px */
    --radius-4: 0.5em;   /* 9px */
    --radius-5: 0.625em; /* 11.25px */
    --radius-6: 0.75em; /* 13.5px */
    --radius-7: 0.875em; /* 15.75px */
    --radius-8: 1em; /* 18px */
    --radius-9: 1.125em; /* 20.25px */
    --radius-10: 1.25em; /* 22.5px */
    --radius-11: 1.375em; /* 24.75px */
    --radius-12: 1.5em; /* 27px */
    --radius-pill: 9999px;

    /* === WIDTH TOKENS === */
    --w-0-75: 0.75em; /* 13.5px */
    --w-1: 1em;       /* 18px */
    --w-1-25: 1.25em; /* 22.5px */
    --w-1-5: 1.5em;   /* 27px */
    --w-2: 2em;       /* 36px */
    --w-3: 3em;       /* 54px */
    --w-4: 4em;       /* 72px */
    --w-5: 5em;       /* 90px */
    --w-6: 6em;       /* 108px */
    --w-7: 7em;       /* 126px */
    --w-8: 8em;       /* 144px */

    /* === HEIGHT TOKENS === */
    --h-0-75: 0.75em; /* 13.5px */
    --h-1: 1em;       /* 18px */
    --h-1-25: 1.25em; /* 22.5px */
    --h-1-5: 1.5em;   /* 27px */
    --h-2: 2em;       /* 36px */
    --h-3: 3em;       /* 54px */
    --h-4: 4em;       /* 72px */
    --h-5: 5em;       /* 90px */
    --h-6: 6em;       /* 108px */
    --h-7: 7em;       /* 126px */
    --h-8: 8em;       /* 144px */

    /* Default Vars */
    /* BLOG PAGE VARIABLES */
    --color-blog-border: var(--color-border);
    --color-blog-tag-background-style-01: var(--color-light);
    --color-blog-tag-background-border-style-01: var(--color-light);
    --color-blog-tag-background-style-02: var(--color-light);
    --color-blog-tag-background-border-style-02: var(--color-light);
    --color-blog-tag-background: var(--color-light);
    --color-blog-tag-background-border: var(--color-light);
    --color-blog-tag-category-container-background: var(--color-light);
    --color-blog-tag-category-container-background-border: var(--color-light);
    --color-blog-tag-category-container-background-style-04: var(--color-light);
    --color-blog-tag-category-container-background-style-03: var(--color-light);
    --color-blog-tag-category-container-background-border-style-03: var(--color-light);
    --color-blog-footer-content: var(--color-text);
    --color-blog-rss-icon: var(--zpsocialprofile-rss);
    --font-size-blog-author: var(--default-text-size);
    --color-blog-rss-icon-path: var(--color-default);

    --color-bloglist-h1: var(--color-secondary);
    --font-family-bloglist-h1: var(--default-heading-font-family);
    --font-size-bloglist-h1: var(--default-text-size);
    --font-weight-bloglist-h1: normal;
    --font-transform-bloglist-h1: none;
    --font-line-height-bloglist-h1: 1.8;
    --font-letter-spacing-bloglist-h1: normal;


}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

noscript {
    height: 100%
}

html {
    font-size: var(--default-text-size);
}
body {
    color: var(--default-text-color);
    font-family: var(--default-font-family);
    font-weight: var(--default-font-weight);
    text-transform: var(--default-text-transform);
    line-height: var(--default-line-height);
    letter-spacing: var(--default-letter-spacing);
    background-image: var(--default-bg-image);
    background-color: var(--default-bg-color);
    background-size: var(--default-bg-image-size);
    background-position: var(--default-bg-image-position);
    background-repeat: var(--default-bg-image-repeat);
    background-attachment: var(--default-bg-image-attachment);
}

.default-container {
    --local-bg-color: var(--default-bg-color);
    --local-text-color: var(--default-text-color);
    --local-link-color: var(--default-link-color);
    --local-hover-link-color: var(--default-hover-link-color);
    --local-border-color: var(--default-border-color);
    --local-accent-1-color: var(--default-accent-1-color);
    --local-accent-2-color: var(--default-accent-2-color);
    --local-accent-3-color: var(--default-accent-3-color);
    --local-accent-4-color: var(--default-accent-4-color);
    --local-primary-bg-color: var(--default-primary-bg-color);
    --local-primary-text-color: var(--default-primary-text-color);
    --local-primary-link-color: var(--default-primary-link-color);
    --local-primary-border-color: var(--default-primary-border-color);
    --local-secondary-bg-color: var(--default-secondary-bg-color);
    --local-secondary-text-color: var(--default-secondary-text-color);
    --local-secondary-link-color: var(--default-secondary-link-color);
    --local-secondary-border-color: var(--default-secondary-border-color);
}
.highlight-container{
    --local-bg-color: var(--highlight-bg-color);
    --local-text-color: var(--highlight-text-color);
    --local-link-color: var(--highlight-link-color);
    --local-hover-link-color: var(--highlight-hover-link-color);
    --local-border-color: var(--highlight-border-color);
    --local-accent-1-color: var(--highlight-accent-1-color);
    --local-accent-2-color: var(--highlight-accent-2-color);
    --local-accent-3-color: var(--highlight-accent-3-color);
    --local-accent-4-color: var(--highlight-accent-4-color);
    --local-primary-bg-color: var(--highlight-primary-bg-color);
    --local-primary-text-color: var(--highlight-primary-text-color);
    --local-primary-link-color: var(--highlight-primary-link-color);
    --local-primary-border-color: var(--highlight-primary-border-color);
    --local-secondary-bg-color: var(--highlight-secondary-bg-color);
    --local-secondary-text-color: var(--highlight-secondary-text-color);
    --local-secondary-link-color: var(--highlight-secondary-link-color);
    --local-secondary-border-color: var(--highlight-secondary-border-color);
}

.default-container,
.highlight-container{
  /* local bg color */
  --local-bg-color-lighter-10: color-mix(in srgb, var(--local-bg-color) 90%, white);
  --local-bg-color-lighter-20: color-mix(in srgb, var(--local-bg-color) 80%, white);
  --local-bg-color-lighter-30: color-mix(in srgb, var(--local-bg-color) 70%, white);
  --local-bg-color-lighter-40: color-mix(in srgb, var(--local-bg-color) 60%, white);
  --local-bg-color-lighter-50: color-mix(in srgb, var(--local-bg-color) 50%, white);
  --local-bg-color-lighter-60: color-mix(in srgb, var(--local-bg-color) 40%, white);
  --local-bg-color-lighter-70: color-mix(in srgb, var(--local-bg-color) 30%, white);
  --local-bg-color-lighter-80: color-mix(in srgb, var(--local-bg-color) 20%, white);
  --local-bg-color-lighter-90: color-mix(in srgb, var(--local-bg-color) 10%, white);
  --local-bg-color-lighter-100: color-mix(in srgb, var(--local-bg-color) 0%, white);
  --local-bg-color-darker-10: color-mix(in srgb, var(--local-bg-color) 90%, black);
  --local-bg-color-darker-20: color-mix(in srgb, var(--local-bg-color) 80%, black);
  --local-bg-color-darker-30: color-mix(in srgb, var(--local-bg-color) 70%, black);
  --local-bg-color-darker-40: color-mix(in srgb, var(--local-bg-color) 60%, black);
  --local-bg-color-darker-50: color-mix(in srgb, var(--local-bg-color) 50%, black);
  --local-bg-color-darker-60: color-mix(in srgb, var(--local-bg-color) 40%, black);
  --local-bg-color-darker-70: color-mix(in srgb, var(--local-bg-color) 30%, black);
  --local-bg-color-darker-80: color-mix(in srgb, var(--local-bg-color) 20%, black);
  --local-bg-color-darker-90: color-mix(in srgb, var(--local-bg-color) 10%, black);
  --local-bg-color-darker-100: color-mix(in srgb, var(--local-bg-color) 0%, black);

  /* local primary bg color */
  --local-primary-bg-color-lighter-10: color-mix(in srgb, var(--local-primary-bg-color) 90%, white);
  --local-primary-bg-color-lighter-20: color-mix(in srgb, var(--local-primary-bg-color) 80%, white);
  --local-primary-bg-color-lighter-30: color-mix(in srgb, var(--local-primary-bg-color) 70%, white);
  --local-primary-bg-color-lighter-40: color-mix(in srgb, var(--local-primary-bg-color) 60%, white);
  --local-primary-bg-color-lighter-50: color-mix(in srgb, var(--local-primary-bg-color) 50%, white);
  --local-primary-bg-color-lighter-60: color-mix(in srgb, var(--local-primary-bg-color) 40%, white);
  --local-primary-bg-color-lighter-70: color-mix(in srgb, var(--local-primary-bg-color) 30%, white);
  --local-primary-bg-color-lighter-80: color-mix(in srgb, var(--local-primary-bg-color) 20%, white);
  --local-primary-bg-color-lighter-90: color-mix(in srgb, var(--local-primary-bg-color) 10%, white);
  --local-primary-bg-color-lighter-100: color-mix(in srgb, var(--local-primary-bg-color) 0%, white);
  --local-primary-bg-color-darker-10: color-mix(in srgb, var(--local-primary-bg-color) 90%, black);
  --local-primary-bg-color-darker-20: color-mix(in srgb, var(--local-primary-bg-color) 80%, black);
  --local-primary-bg-color-darker-30: color-mix(in srgb, var(--local-primary-bg-color) 70%, black);
  --local-primary-bg-color-darker-40: color-mix(in srgb, var(--local-primary-bg-color) 60%, black);
  --local-primary-bg-color-darker-50: color-mix(in srgb, var(--local-primary-bg-color) 50%, black);
  --local-primary-bg-color-darker-60: color-mix(in srgb, var(--local-primary-bg-color) 40%, black);
  --local-primary-bg-color-darker-70: color-mix(in srgb, var(--local-primary-bg-color) 30%, black);
  --local-primary-bg-color-darker-80: color-mix(in srgb, var(--local-primary-bg-color) 20%, black);
  --local-primary-bg-color-darker-90: color-mix(in srgb, var(--local-primary-bg-color) 10%, black);
  --local-primary-bg-color-darker-100: color-mix(in srgb, var(--local-primary-bg-color) 0%, black);

  /* local secondary bg color */
  --local-secondary-bg-color-lighter-10: color-mix(in srgb, var(--local-secondary-bg-color) 90%, white);
  --local-secondary-bg-color-lighter-20: color-mix(in srgb, var(--local-secondary-bg-color) 80%, white);
  --local-secondary-bg-color-lighter-30: color-mix(in srgb, var(--local-secondary-bg-color) 70%, white);
  --local-secondary-bg-color-lighter-40: color-mix(in srgb, var(--local-secondary-bg-color) 60%, white);
  --local-secondary-bg-color-lighter-50: color-mix(in srgb, var(--local-secondary-bg-color) 50%, white);
  --local-secondary-bg-color-lighter-60: color-mix(in srgb, var(--local-secondary-bg-color) 40%, white);
  --local-secondary-bg-color-lighter-70: color-mix(in srgb, var(--local-secondary-bg-color) 30%, white);
  --local-secondary-bg-color-lighter-80: color-mix(in srgb, var(--local-secondary-bg-color) 20%, white);
  --local-secondary-bg-color-lighter-90: color-mix(in srgb, var(--local-secondary-bg-color) 10%, white);
  --local-secondary-bg-color-lighter-100: color-mix(in srgb, var(--local-secondary-bg-color) 0%, white);
  --local-secondary-bg-color-darker-10: color-mix(in srgb, var(--local-secondary-bg-color) 90%, black);
  --local-secondary-bg-color-darker-20: color-mix(in srgb, var(--local-secondary-bg-color) 80%, black);
  --local-secondary-bg-color-darker-30: color-mix(in srgb, var(--local-secondary-bg-color) 70%, black);
  --local-secondary-bg-color-darker-40: color-mix(in srgb, var(--local-secondary-bg-color) 60%, black);
  --local-secondary-bg-color-darker-50: color-mix(in srgb, var(--local-secondary-bg-color) 50%, black);
  --local-secondary-bg-color-darker-60: color-mix(in srgb, var(--local-secondary-bg-color) 40%, black);
  --local-secondary-bg-color-darker-70: color-mix(in srgb, var(--local-secondary-bg-color) 30%, black);
  --local-secondary-bg-color-darker-80: color-mix(in srgb, var(--local-secondary-bg-color) 20%, black);
  --local-secondary-bg-color-darker-90: color-mix(in srgb, var(--local-secondary-bg-color) 10%, black);
  --local-secondary-bg-color-darker-100: color-mix(in srgb, var(--local-secondary-bg-color) 0%, black);

  /* local accent 1 color */
  --local-accent-1-color-lighter-10: color-mix(in srgb, var(--local-accent-1-color) 90%, white);
  --local-accent-1-color-lighter-20: color-mix(in srgb, var(--local-accent-1-color) 80%, white);
  --local-accent-1-color-lighter-30: color-mix(in srgb, var(--local-accent-1-color) 70%, white);
  --local-accent-1-color-lighter-40: color-mix(in srgb, var(--local-accent-1-color) 60%, white);
  --local-accent-1-color-lighter-50: color-mix(in srgb, var(--local-accent-1-color) 50%, white);
  --local-accent-1-color-lighter-60: color-mix(in srgb, var(--local-accent-1-color) 40%, white);
  --local-accent-1-color-lighter-70: color-mix(in srgb, var(--local-accent-1-color) 30%, white);
  --local-accent-1-color-lighter-80: color-mix(in srgb, var(--local-accent-1-color) 20%, white);
  --local-accent-1-color-lighter-90: color-mix(in srgb, var(--local-accent-1-color) 10%, white);
  --local-accent-1-color-lighter-100: color-mix(in srgb, var(--local-accent-1-color) 0%, white);
  --local-accent-1-color-darker-10: color-mix(in srgb, var(--local-accent-1-color) 90%, black);
  --local-accent-1-color-darker-20: color-mix(in srgb, var(--local-accent-1-color) 80%, black);
  --local-accent-1-color-darker-30: color-mix(in srgb, var(--local-accent-1-color) 70%, black);
  --local-accent-1-color-darker-40: color-mix(in srgb, var(--local-accent-1-color) 60%, black);
  --local-accent-1-color-darker-50: color-mix(in srgb, var(--local-accent-1-color) 50%, black);
  --local-accent-1-color-darker-60: color-mix(in srgb, var(--local-accent-1-color) 40%, black);
  --local-accent-1-color-darker-70: color-mix(in srgb, var(--local-accent-1-color) 30%, black);
  --local-accent-1-color-darker-80: color-mix(in srgb, var(--local-accent-1-color) 20%, black);
  --local-accent-1-color-darker-90: color-mix(in srgb, var(--local-accent-1-color) 10%, black);
  --local-accent-1-color-darker-100: color-mix(in srgb, var(--local-accent-1-color) 0%, black);

  /* local accent 2 color */
  --local-accent-2-color-lighter-10: color-mix(in srgb, var(--local-accent-2-color) 90%, white);
  --local-accent-2-color-lighter-20: color-mix(in srgb, var(--local-accent-2-color) 80%, white);
  --local-accent-2-color-lighter-30: color-mix(in srgb, var(--local-accent-2-color) 70%, white);
  --local-accent-2-color-lighter-40: color-mix(in srgb, var(--local-accent-2-color) 60%, white);
  --local-accent-2-color-lighter-50: color-mix(in srgb, var(--local-accent-2-color) 50%, white);
  --local-accent-2-color-lighter-60: color-mix(in srgb, var(--local-accent-2-color) 40%, white);
  --local-accent-2-color-lighter-70: color-mix(in srgb, var(--local-accent-2-color) 30%, white);
  --local-accent-2-color-lighter-80: color-mix(in srgb, var(--local-accent-2-color) 20%, white);
  --local-accent-2-color-lighter-90: color-mix(in srgb, var(--local-accent-2-color) 10%, white);
  --local-accent-2-color-lighter-100: color-mix(in srgb, var(--local-accent-2-color) 0%, white);
  --local-accent-2-color-darker-10: color-mix(in srgb, var(--local-accent-2-color) 90%, black);
  --local-accent-2-color-darker-20: color-mix(in srgb, var(--local-accent-2-color) 80%, black);
  --local-accent-2-color-darker-30: color-mix(in srgb, var(--local-accent-2-color) 70%, black);
  --local-accent-2-color-darker-40: color-mix(in srgb, var(--local-accent-2-color) 60%, black);
  --local-accent-2-color-darker-50: color-mix(in srgb, var(--local-accent-2-color) 50%, black);
  --local-accent-2-color-darker-60: color-mix(in srgb, var(--local-accent-2-color) 40%, black);
  --local-accent-2-color-darker-70: color-mix(in srgb, var(--local-accent-2-color) 30%, black);
  --local-accent-2-color-darker-80: color-mix(in srgb, var(--local-accent-2-color) 20%, black);
  --local-accent-2-color-darker-90: color-mix(in srgb, var(--local-accent-2-color) 10%, black);
  --local-accent-2-color-darker-100: color-mix(in srgb, var(--local-accent-2-color) 0%, black);

  /* local accent 3 color */
  --local-accent-3-color-lighter-10: color-mix(in srgb, var(--local-accent-3-color) 90%, white);
  --local-accent-3-color-lighter-20: color-mix(in srgb, var(--local-accent-3-color) 80%, white);
  --local-accent-3-color-lighter-30: color-mix(in srgb, var(--local-accent-3-color) 70%, white);
  --local-accent-3-color-lighter-40: color-mix(in srgb, var(--local-accent-3-color) 60%, white);
  --local-accent-3-color-lighter-50: color-mix(in srgb, var(--local-accent-3-color) 50%, white);
  --local-accent-3-color-lighter-60: color-mix(in srgb, var(--local-accent-3-color) 40%, white);
  --local-accent-3-color-lighter-70: color-mix(in srgb, var(--local-accent-3-color) 30%, white);
  --local-accent-3-color-lighter-80: color-mix(in srgb, var(--local-accent-3-color) 20%, white);
  --local-accent-3-color-lighter-90: color-mix(in srgb, var(--local-accent-3-color) 10%, white);
  --local-accent-3-color-lighter-100: color-mix(in srgb, var(--local-accent-3-color) 0%, white);
  --local-accent-3-color-darker-10: color-mix(in srgb, var(--local-accent-3-color) 90%, black);
  --local-accent-3-color-darker-20: color-mix(in srgb, var(--local-accent-3-color) 80%, black);
  --local-accent-3-color-darker-30: color-mix(in srgb, var(--local-accent-3-color) 70%, black);
  --local-accent-3-color-darker-40: color-mix(in srgb, var(--local-accent-3-color) 60%, black);
  --local-accent-3-color-darker-50: color-mix(in srgb, var(--local-accent-3-color) 50%, black);
  --local-accent-3-color-darker-60: color-mix(in srgb, var(--local-accent-3-color) 40%, black);
  --local-accent-3-color-darker-70: color-mix(in srgb, var(--local-accent-3-color) 30%, black);
  --local-accent-3-color-darker-80: color-mix(in srgb, var(--local-accent-3-color) 20%, black);
  --local-accent-3-color-darker-90: color-mix(in srgb, var(--local-accent-3-color) 10%, black);
  --local-accent-3-color-darker-100: color-mix(in srgb, var(--local-accent-3-color) 0%, black);

  /* local accent 4 color */
  --local-accent-4-color-lighter-10: color-mix(in srgb, var(--local-accent-4-color) 90%, white);
  --local-accent-4-color-lighter-20: color-mix(in srgb, var(--local-accent-4-color) 80%, white);
  --local-accent-4-color-lighter-30: color-mix(in srgb, var(--local-accent-4-color) 70%, white);
  --local-accent-4-color-lighter-40: color-mix(in srgb, var(--local-accent-4-color) 60%, white);
  --local-accent-4-color-lighter-50: color-mix(in srgb, var(--local-accent-4-color) 50%, white);
  --local-accent-4-color-lighter-60: color-mix(in srgb, var(--local-accent-4-color) 40%, white);
  --local-accent-4-color-lighter-70: color-mix(in srgb, var(--local-accent-4-color) 30%, white);
  --local-accent-4-color-lighter-80: color-mix(in srgb, var(--local-accent-4-color) 20%, white);
  --local-accent-4-color-lighter-90: color-mix(in srgb, var(--local-accent-4-color) 10%, white);
  --local-accent-4-color-lighter-100: color-mix(in srgb, var(--local-accent-4-color) 0%, white);
  --local-accent-4-color-darker-10: color-mix(in srgb, var(--local-accent-4-color) 90%, black);
  --local-accent-4-color-darker-20: color-mix(in srgb, var(--local-accent-4-color) 80%, black);
  --local-accent-4-color-darker-30: color-mix(in srgb, var(--local-accent-4-color) 70%, black);
  --local-accent-4-color-darker-40: color-mix(in srgb, var(--local-accent-4-color) 60%, black);
  --local-accent-4-color-darker-50: color-mix(in srgb, var(--local-accent-4-color) 50%, black);
  --local-accent-4-color-darker-60: color-mix(in srgb, var(--local-accent-4-color) 40%, black);
  --local-accent-4-color-darker-70: color-mix(in srgb, var(--local-accent-4-color) 30%, black);
  --local-accent-4-color-darker-80: color-mix(in srgb, var(--local-accent-4-color) 20%, black);
  --local-accent-4-color-darker-90: color-mix(in srgb, var(--local-accent-4-color) 10%, black);
  --local-accent-4-color-darker-100: color-mix(in srgb, var(--local-accent-4-color) 0%, black);
}

a {
    color: var(--local-link-color);
}

a:hover {
    color: var(--local-hover-link-color)
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typewriter-cursor {
    margin-left: 0.05em;
    font-weight: bold;
    animation: cursor-blink 0.7s infinite;
}

.text-highlight {
    position: relative;
    z-index: 2;
}

/* Specific highlight styles — stroke color follows current text color via mask */
.text-highlight-underline::after, .text-highlight-circle::after, .text-highlight-scribble::after, .text-highlight-jagged::after, .text-highlight-cross::after, .text-highlight-highlight7::after, .text-highlight-highlight8::after, .text-highlight-highlight9::after, .text-highlight-highlight10::after, .text-highlight-highlight11::after, .text-highlight-highlight12::after, .text-highlight-highlight13::after, .text-highlight-highlight14::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Lower z-index to appear behind text */
    background-color: var(--local-highlight-color, currentColor);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.text-highlight-underline::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 43h100%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 43h100%22 /%3E%3C/svg%3E');
}

.text-highlight-circle::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M34.028 35.455c55.063 1.688 68.872 0 66.226-18.645C98 2.671 69.454 0 49 0S-2 2.671-2 17.727 23.113 39 72.059 40.56%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M34.028 35.455c55.063 1.688 68.872 0 66.226-18.645C98 2.671 69.454 0 49 0S-2 2.671-2 17.727 23.113 39 72.059 40.56%22 /%3E%3C/svg%3E');
}

.text-highlight-scribble::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 38c5-4 10 2 18-2s12 6 20 1 10-5 18 1 12 5 20-1 8-4 14 2 24-1%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 38c5-4 10 2 18-2s12 6 20 1 10-5 18 1 12 5 20-1 8-4 14 2 24-1%22 /%3E%3C/svg%3E');
}

.text-highlight-jagged::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 54%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.777-10.889 10.889 0C38.11 54.444 38.11 52.444 49 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 54%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M0 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.777-10.889 10.889 0C38.11 54.444 38.11 52.444 49 48q21.778-10.889 10.889 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0c-5.445 5.444-5.445 5.444 5.444 0q21.778-10.889 10.89 0%22 /%3E%3C/svg%3E');
}

.text-highlight-cross::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 43 100 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 43 100 0%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight7::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 10Q50 0 100 10M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 10Q50 0 100 10M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight8::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 34Q50 44 100 34%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 34Q50 44 100 34%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight9::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 44Q50 34 100 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight10::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 40Q50 32 100 40M12 42Q50 38 56 40M20 46Q50 40 80 44%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222.5%22 d=%22M0 40Q50 32 100 40M12 42Q50 38 56 40M20 46Q50 40 80 44%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight11::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 40Q40 35 70 42M10 35Q40 29 90 41M0 40Q50 30 85 40%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%222%22 d=%22M0 40Q40 35 70 42M10 35Q40 29 90 41M0 40Q50 30 85 40%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight12::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 0%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22m0 0 100 43M0 0%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight13::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2220%22 width=%22100%22 height=%226%22 fill=%22%23000%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 44%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2220%22 width=%22100%22 height=%226%22 fill=%22%23000%22 /%3E%3C/svg%3E');
}

.text-highlight-highlight14::after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M15 50L56 48C80 50 104 30 100 22C96 8 78 0 50 0C22 0 4 8 0 22C-4 32 18 50 36 42%22 /%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 100 50%22 preserveAspectRatio=%22none%22%3E%3Cpath stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-width=%223%22 d=%22M15 50L56 48C80 50 104 30 100 22C96 8 78 0 50 0C22 0 4 8 0 22C-4 32 18 50 36 42%22 /%3E%3C/svg%3E');
}

/* Uncomment below to enable device view plugin styles */
/* Device view plugin styles starts — breakpoints match VIEWPORT_DEFINITIONS in viewport-utils.js */
.zp-hidden-all,
.zp-hidden-all.zprow {
    display: none !important;
}

/* mobile: max-width 767px */
@media (max-width: 767px) {
    .zp-hidden-xs,
    .zp-hidden-xs.zprow {
        display: none !important;
    }
}

/* tablet: max-width 991px and min-width 768px */
@media (max-width: 991px) and (min-width: 768px) {
    .zp-hidden-sm,
    .zp-hidden-sm.zprow {
        display: none !important;
    }
}

/* desktop: min-width 992px */
@media (min-width: 992px) {
    .zp-hidden-md,
    .zp-hidden-md.zprow {
        display: none !important;
    }
}
/* Device view plugin styles ends */

/* ============================================
   LIGHTBOX (page-container overlay)
   ============================================ */

.zp-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999990;
  display: flex;
  flex-direction: column;
  --zp-lightbox-zoom: 1;
  --zp-lightbox-chrome-height: 60px;
  background: rgba(17, 17, 17, 0.94);
  color: #fff;
  user-select: none;
}

.zp-lightbox-theme-light {
  background: rgba(255, 255, 255, 0.96);
  color: #111;
}

.zp-lightbox-chrome {
  flex: 0 0 var(--zp-lightbox-chrome-height);
  height: var(--zp-lightbox-chrome-height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-inline: 16px;
  background: rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
}

.zp-lightbox-theme-light .zp-lightbox-chrome {
  background: rgba(0, 0, 0, 0.08);
}

.zp-lightbox-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zp-lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.zp-lightbox-btn:hover:not(:disabled),
.zp-lightbox-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.zp-lightbox-theme-light .zp-lightbox-btn:hover:not(:disabled),
.zp-lightbox-theme-light .zp-lightbox-btn:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.zp-lightbox-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.zp-lightbox-btn-close:hover:not(:disabled),
.zp-lightbox-btn-close:focus-visible {
  color: #ff6b6b;
}

.zp-lightbox-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.zp-lightbox-body > .zpelem-slider,
.zp-lightbox-body > .zpelem-slider.zpslider-lightbox-mode {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.zp-lightbox-body .zpslider-lightbox-mode > .zpslider-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-container {
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - var(--zp-lightbox-chrome-height) - 96px);
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zp-lightbox-slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
}

.zp-lightbox-slide-img {
  max-width: 100%;
  max-height: calc(100vh - var(--zp-lightbox-chrome-height) - 140px);
  object-fit: contain;
  transform: scale(var(--zp-lightbox-zoom, 1));
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.zp-lightbox-slide-caption {
  max-width: min(720px, 90%);
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrows-container {
  z-index: 3;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrow-left,
.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrow-right {
  color: inherit;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-arrows-container svg {
  fill: currentColor;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05.zpslider-controller-container {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  justify-content: center;
  padding-block: 10px 16px;
  background: transparent;
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller {
  border-color: rgba(255, 255, 255, 0.45);
}

.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller {
  border-color: rgba(0, 0, 0, 0.25);
}

.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller:hover,
.zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller.zpslider-controller-active {
  border-color: #fff;
  box-shadow: 0 0 0 1px #fff;
}

.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller:hover,
.zp-lightbox-theme-light .zpslider-controller-type-05 .zpslider-controller.zpslider-controller-active {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}

@media (max-width: 767px) {
  .zp-lightbox-overlay {
    --zp-lightbox-chrome-height: 48px;
  }

  .zp-lightbox-btn {
    width: 44px;
    height: 44px;
  }

  .zp-lightbox-body .zpslider-lightbox-mode .zpslider-content-container {
    height: calc(100vh - var(--zp-lightbox-chrome-height) - 88px);
  }

  .zp-lightbox-slide-img {
    max-height: calc(100vh - var(--zp-lightbox-chrome-height) - 120px);
  }

  .zp-lightbox-body .zpslider-lightbox-mode .zpslider-controller-type-05 .zpslider-controller {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2212, U+2215;
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17E, U+192, U+1FC-1FF, U+237, U+1E80-1E85, U+1EF2-1EF3;
}
@font-face {
   font-family:"Montez";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montezregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montezregular/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2D8-2D9, U+2DB, U+2DD, U+3BC, U+2122, U+2202, U+2248, U+2260, U+2264-2265, U+FB01-FB02;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+8E, U+9E, U+A0-AE, U+B0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2074, U+20AC;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_latin_ext.woff") format("woff");
   unicode-range: U+10C-10D, U+160-161, U+178, U+192, U+237;
}
@font-face {
   font-family:"Cabin";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinbold/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2070, U+2075-2079, U+2080-2089, U+2122;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+8E, U+9E, U+A0-AE, U+B0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2074, U+20AC;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_latin_ext.woff") format("woff");
   unicode-range: U+10C-10D, U+160-161, U+178, U+192, U+237;
}
@font-face {
   font-family:"Cabin";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/cabinregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/cabinregular/font_others.woff") format("woff");
   unicode-range: U+2C7, U+2070, U+2075-2079, U+2080-2089, U+2122;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+462-463, U+46A-46B, U+472-475, U+48A-48F, U+492-4A5, U+4A8-4AF, U+4B2-4C4, U+4C6-4FF, U+510-513, U+51A-51D, U+524-529, U+52E-52F, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2074, U+20AC, U+2212, U+2215, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1B7, U+1C4-1CE, U+1D3-1D4, U+1E4-1EB, U+1EE-1EF, U+1FA-21B, U+21E-21F, U+22A-22D, U+230-233, U+237, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8, U+20BA, U+20BC-20BD, U+25CC, U+A78B-A78C;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_others.woff") format("woff");
   unicode-range: U+259, U+292, U+2B9-2BC, U+2BE-2BF, U+2C7-2CC, U+2D8-2D9, U+2DB, U+2DD, U+300-304, U+306-30C, U+30F, U+311-312, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335-338, U+394, U+3A9, U+3BC, U+3C0, U+2070, U+2075-2079, U+2080-2089, U+20B9, U+2113, U+2122, U+2126, U+212A-212B, U+212E, U+2153-2154, U+215B-215E, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+25CC, U+27E8-27E9, U+FB01-FB02;
}
@font-face {
   font-family:"Montserrat";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratbold/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+462-463, U+46A-46B, U+472-475, U+48A-48F, U+492-4A5, U+4A8-4AF, U+4B2-4C4, U+4C6-4FF, U+510-513, U+51A-51D, U+524-529, U+52E-52F, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2074, U+20AC, U+2212, U+2215, U+25CC;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1B7, U+1C4-1CE, U+1D3-1D4, U+1E4-1EB, U+1EE-1EF, U+1FA-21B, U+21E-21F, U+22A-22D, U+230-233, U+237, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8, U+20BA, U+20BC-20BD, U+25CC, U+A78B-A78C;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_others.woff") format("woff");
   unicode-range: U+259, U+292, U+2B9-2BC, U+2BE-2BF, U+2C7-2CC, U+2D8-2D9, U+2DB, U+2DD, U+300-304, U+306-30C, U+30F, U+311-312, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335-338, U+394, U+3A9, U+3BC, U+3C0, U+2070, U+2075-2079, U+2080-2089, U+20B9, U+2113, U+2122, U+2126, U+212A-212B, U+212E, U+2153-2154, U+215B-215E, U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+25CC, U+27E8-27E9, U+FB01-FB02;
}
@font-face {
   font-family:"Montserrat";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/montserratregular/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116, U+25CC;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_greek.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_greek.woff") format("woff");
   unicode-range: U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D1-3D2, U+3D6;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+460-486, U+488-48F, U+492-4AF, U+4B2-513;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A7, U+20AB;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
   font-family:"Open Sans";
   font-weight:400;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensans/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensans/font_others.woff") format("woff");
   unicode-range: U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+2070, U+2075-2079, U+207F, U+2105, U+2113, U+2120, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB00-FB04, U+FEFF, U+FFFC-FFFD;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_greek.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_greek.woff") format("woff");
   unicode-range: U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D1-3D2, U+3D6;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic_ext.woff") format("woff");
   unicode-range: U+460-486, U+488-48F, U+492-4AF, U+4B2-513;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_latin.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_latin.woff") format("woff");
   unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-200B, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203C, U+2044, U+2074, U+20AC, U+2212;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_latin_ext.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_latin_ext.woff") format("woff");
   unicode-range: U+100-130, U+132-151, U+154-17F, U+192, U+1A0-1A1, U+1AF-1B0, U+1F0, U+1FA-1FF, U+218-21B, U+237, U+1E00-1E01, U+1E3E-1E3F, U+1E80-1E85, U+1EA0-1EF9, U+20A3-20A4, U+20A7, U+20AB;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_cyrillic.woff") format("woff");
   unicode-range: U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
   font-family:"Open Sans";
   font-weight:700;
   font-style:normal;
   font-display:swap;
   src:url("//static.zohocdn.com/webfonts/opensansbold/font_others.woff2") format("woff2"),
       url("//static.zohocdn.com/webfonts/opensansbold/font_others.woff") format("woff");
   unicode-range: U+2BC, U+2C7, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+2F3, U+300-301, U+303, U+309, U+30F, U+323, U+1F4D, U+2070, U+2075-2079, U+207F, U+2105, U+2113, U+2120, U+2122, U+2126, U+212E, U+215B-215E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB00-FB04, U+FEFF, U+FFFC-FFFD;
}
.zppage-template{position:relative;width:100%}.zpelem-container{width:100%;display:flex;min-height:20px;flex-flow:column}@keyframes zp-menu-slide-in{0%{translate:0-100%;opacity:.6}to{translate:0 0;opacity:1}}@keyframes zp-overlap-sticky-reveal{0%{translate:0-100%;opacity:0}to{translate:0 0;opacity:1}}.zpheader-container{width:100%;--local-bg-color:var(--default-bg-color);--local-border-color:var(--default-border-color);--zp-overlap-hide-duration:0.15s;--zp-overlap-reveal-duration:0.45s}.zpheader-container.highlight-container{--local-bg-color:var(--highlight-bg-color);--local-border-color:var(--highlight-border-color)}header .zpelement:not(.zpmm .zpelement),header.zpelement{margin-block-start:0}.zpcontainer-overlap{position:fixed;width:100%;top:0;z-index:50;min-height:var(--zp-overlap-measured-height, max-content)}.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=fixed],.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=sticky]:not([data-scrolled=true]){position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0}.zppage-template>.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-scrolled=true]{position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;background-color:transparent;z-index:50}.zppage-template:has(>.zpcontainer-overlap){--zp-overlap-offset:var(--zp-overlap-height, 0px);--zp-slider-content-offset:var(--zp-overlap-height, 0px)}.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelem-container:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelement:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpsection:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelem-container:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelement:first-of-type,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpsection:first-of-type{--zp-overlap-bg-extend:var(--zp-overlap-offset, 0px);padding-block-start:var(--zp-overlap-offset, 0px);box-sizing:border-box}.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpcontainer-fluid>.zpelem-slider:first-of-type .zpslider-content-inner,.zppage-template>.zpcontainer-overlap+.zpelem-container>.zpelem-slider:first-of-type .zpslider-content-inner,.zppage-template>.zpcontainer-overlap+.zpelem-container>[data-element-type=slider]:first-of-type .zpslider-content-inner{padding-block-start:var(--zp-slider-content-offset, 0px)}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap):not([data-sticky-header-content=menu-only]){position:sticky;inset-block-start:0;z-index:50}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only]{position:relative;z-index:50}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only]>:has(.zpelem-menu){position:static}.zpheader-container[data-header-scroll-behavior=sticky]:not(.zpcontainer-overlap)[data-sticky-header-content=menu-only][data-scrolled=true]>:has(.zpelem-menu){position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;z-index:50;animation:zp-menu-slide-in .3s ease-out both}.zpheader-container[data-header-scroll-behavior=sticky]{--zp-sticky-header-bg-color:color-mix(in srgb, var(--local-bg-color) 95%, transparent)}.zpheader-container[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only]){transition:background-color .3s ease}.zpheader-container[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only])[data-scrolled=true]{background-color:var(--zp-sticky-header-bg-color)}.zpheader-container[data-header-scroll-behavior=sticky][data-sticky-header-content=menu-only]>:has(.zpelem-menu){transition:background-color .3s ease-out}.zpheader-container[data-header-scroll-behavior=sticky][data-sticky-header-content=menu-only][data-scrolled=true]>:has(.zpelem-menu){background-color:var(--zp-sticky-header-bg-color)}.zpheader-container[data-sticky-header-content=menu-only]>:not(:has(.zpelem-menu)){overflow:hidden;max-height:300px;opacity:1;transition:max-height .35s ease-in-out,opacity .3s ease-in-out,padding-block .35s ease-in-out,margin-block .35s ease-in-out;will-change:max-height,opacity}.zpheader-container[data-sticky-header-content=menu-only][data-scrolled=true]>:not(:has(.zpelem-menu)){max-height:0;opacity:0;pointer-events:none;padding-block:0;margin-block:0}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-sticky-phase=hiding]{opacity:0;pointer-events:none;transition:opacity var(--zp-overlap-hide-duration) ease-out}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky][data-sticky-phase=sticky]{opacity:1}.zpheader-container.zpcontainer-overlap[data-header-scroll-behavior=sticky]:not([data-sticky-header-content=menu-only])[data-sticky-phase=sticky][data-scrolled=true]{animation:zp-overlap-sticky-reveal var(--zp-overlap-reveal-duration) ease-out both}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only][data-sticky-phase=sticky][data-scrolled=true]>:has(.zpelem-menu){position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;z-index:50;animation:zp-overlap-sticky-reveal var(--zp-overlap-reveal-duration) ease-out both}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only][data-scrolled=true]{background-color:transparent!important;background-image:none!important}.zpheader-container.zpcontainer-overlap[data-sticky-header-content=menu-only]>:not(:has(.zpelem-menu)){transition:none}.zpheader-container[data-sticky-header-content=menu-only]>:has(.zpelem-menu){will-change:auto}.default-container,.highlight-container{--local-code-snippet-box-shadow-color:#0f0f0f}.default-container{--local-code-snippet-bg-color:var(--default-bg-color);--local-code-snippet-border-color:var(--default-border-color)}.highlight-container{--local-code-snippet-bg-color:var(--highlight-bg-color);--local-code-snippet-border-color:var(--highlight-border-color)}.zpelem-code-snippet{width:100%;--local-bg-color:var(--local-code-snippet-bg-color, var(--default-bg-color));--local-border-color:var(--local-code-snippet-border-color, var(--default-border-color));--local-box-shadow-color:var(--local-code-snippet-box-shadow-color, #0f0f0f)}.zpelem-code-snippet.zpcode-snippet-align-left{align-self:flex-start;margin-inline-end:auto}.zpelem-code-snippet.zpcode-snippet-align-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-right{align-self:flex-end;margin-inline-start:auto}.zpelem-code-snippet.zpcode-snippet-align-none{align-self:stretch;margin-inline:0}.zpcode-snippet{width:100%}.zpcode-snippet-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;min-height:200px;padding:24px 12px;box-sizing:border-box;text-align:center}.zpcode-snippet-placeholder__icon{display:block;flex-shrink:0}.zpcode-snippet-placeholder__content{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.zpcode-snippet-placeholder__title{margin:0;width:100%;font-size:24px;font-weight:600;line-height:32px;color:var(--default-text-color)}.zpcode-snippet-placeholder__edit{display:inline-block;font-size:14px;font-weight:500;line-height:22px;color:var(--default-link-color);cursor:pointer}.zpcode-snippet-placeholder__edit:focus,.zpcode-snippet-placeholder__edit:hover{text-decoration:underline;outline:0}@media all and (min-width:768px) and (max-width:991px){.zpelem-code-snippet.zpcode-snippet-align-tablet-left{align-self:flex-start;margin-inline-end:auto;margin-inline-start:0}.zpelem-code-snippet.zpcode-snippet-align-tablet-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-tablet-right{align-self:flex-end;margin-inline-start:auto;margin-inline-end:0}.zpelem-code-snippet.zpcode-snippet-align-tablet-none{align-self:stretch;margin-inline:0}}@media all and (max-width:767px){.zpelem-code-snippet.zpcode-snippet-align-mobile-left{align-self:flex-start;margin-inline-end:auto;margin-inline-start:0}.zpelem-code-snippet.zpcode-snippet-align-mobile-center{align-self:center;margin-inline:auto}.zpelem-code-snippet.zpcode-snippet-align-mobile-right{align-self:flex-end;margin-inline-start:auto;margin-inline-end:0}.zpelem-code-snippet.zpcode-snippet-align-mobile-none{align-self:stretch;margin-inline:0}}
/* BEGIN zs-custom-css */
:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --accent: #06b6d4;
  --ink: #0b1220;
  --text: #475569;
  --muted: #94a3b8;
  --bg: #ffffff;
  --alt: #f6f7fb;
  --border: #e6e8f0;
  --radius: 18px;
  --shadow: 0 10px 30px -12px rgba(30, 41, 99, .18);
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 120%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Inter", sans-serif; color: var(--ink); line-height: 1.2; }
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, 92%); margin: 0 auto; }
.center { text-align: center; margin-top: 2.5rem; }
.svg-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: .25s; }
.site-header.scrolled { border-color: var(--border); box-shadow: 0 6px 24px -14px rgba(15,23,42,.25); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: flex; align-items: center; gap: .65rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.logo-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.logo-light { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 2rem; font-weight: 500; font-size: .95rem; }
.nav-links a:not(.btn) { position: relative; padding: .3rem 0; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--grad); transition: width .25s; }
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--primary); }
.nav-toggle { display: none; background: none; border: 0; width: 42px; height: 42px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn { display: inline-block; background: var(--grad); color: #fff; padding: .9rem 1.7rem; border-radius: 999px; font-weight: 600; border: 0; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(79,70,229,.7); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(79,70,229,.8); }
.btn-small { padding: .55rem 1.3rem; font-size: .92rem; }
.btn-light { background: #fff; color: var(--primary); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.btn-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); box-shadow: none; backdrop-filter: blur(6px); }

/* Hero */
.hero, .page-banner, .cta { position: relative; overflow: hidden; color: #e2e8f0; background: radial-gradient(1200px 500px at 85% -10%, #7c3aed 0%, transparent 60%), linear-gradient(135deg, #0b1220 0%, #1e1b4b 55%, #312e81 100%); }
.hero { padding: 6rem 0 7rem; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.02em; margin: 1rem 0 1.2rem; }
.hero p { font-size: 1.1rem; max-width: 540px; opacity: .88; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.eyebrow { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #c7d2fe; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow.dark { background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.2); color: var(--primary); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.b1 { width: 380px; height: 380px; background: #06b6d4; top: -140px; left: -100px; animation: drift 14s ease-in-out infinite alternate; }
.b2 { width: 340px; height: 340px; background: #a855f7; bottom: -160px; right: 10%; animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.1); } }

.hero-visual { position: relative; padding: 1.5rem; }
.window { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); overflow: hidden; }
.window-bar { display: flex; gap: .4rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.window-body { padding: 1.6rem; display: grid; gap: .8rem; }
.line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); }
.l1 { width: 45%; background: linear-gradient(90deg, #22d3ee, #818cf8); } .l2 { width: 90%; } .l3 { width: 75%; } .l4 { width: 85%; } .l5 { width: 55%; }
.float-card { position: absolute; display: flex; align-items: center; gap: .55rem; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; padding: .7rem 1rem; border-radius: 14px; box-shadow: 0 20px 40px -15px rgba(0,0,0,.45); animation: bob 5s ease-in-out infinite; }
.float-card .svg-icon { width: 1.2rem; height: 1.2rem; color: var(--primary); }
.fc1 { left: -10px; bottom: 10px; } .fc2 { right: -6px; top: 0; animation-delay: -2.5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* Stats */
.stats-band { margin-top: -3rem; position: relative; z-index: 2; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 2rem 1rem; text-align: center; }
.stats strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 2.3rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: .92rem; color: var(--text); }

/* Sections */
.section { padding: 6rem 0; }
.section.alt { background: var(--alt); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 3.2rem; }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: .9rem 0 .7rem; }
.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(79,70,229,.3); }
.card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.icon-box { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(6,182,212,.12)); color: var(--primary); margin-bottom: 1.2rem; flex: none; }
.num { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 2.2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .4rem; }
.team { text-align: center; }
.avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--grad); color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 2.2rem; font-weight: 800; display: grid; place-items: center; margin: 0 auto 1.1rem; box-shadow: 0 12px 24px -10px rgba(79,70,229,.6); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; position: relative; }
.step { text-align: center; padding: 0 .5rem; }
.step-num { width: 60px; height: 60px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--grad); box-shadow: 0 12px 24px -10px rgba(79,70,229,.6); }
.step h3 { margin-bottom: .4rem; }

/* CTA / banners */
.cta { text-align: center; padding: 5.5rem 0; }
.cta h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .6rem; }
.cta p { margin-bottom: 1.8rem; opacity: .85; }
.page-banner { padding: 5rem 0 4.5rem; text-align: center; }
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; margin-top: 1rem; letter-spacing: -.02em; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; align-items: start; }
.two-col h2 { font-size: 2rem; margin-bottom: 1rem; }
.two-col p { margin-bottom: 1rem; }
.panel { background: var(--alt); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 2rem; }
.panel h3 { margin-bottom: .4rem; } .panel h3:not(:first-child) { margin-top: 1.4rem; }

/* Contact */
.contact-list { max-width: 900px; margin: 0 auto; }
.contact-item { display: flex; gap: 1.2rem; align-items: flex-start; }
.contact-item .icon-box { margin-bottom: 0; }
.contact-item h3 { font-size: 1.1rem; margin-bottom: .25rem; }

/* Footer */
.site-footer { background: #0b1220; color: #94a3b8; padding-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 3rem; padding-bottom: 3rem; }
.footer-about { margin-top: 1rem; max-width: 320px; }
.site-footer h4 { color: #fff; margin-bottom: 1rem; font-size: 1rem; }
.site-footer a:not(.logo) { display: block; margin-bottom: .45rem; transition: color .2s; }
.site-footer a:not(.logo):hover { color: #fff; }
.site-footer p { margin-bottom: .6rem; }
.copyright { text-align: center; padding: 1.4rem 1rem; border-top: 1px solid #1e293b; font-size: .88rem; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .blob, .float-card { animation: none; } }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 4%; border-bottom: 1px solid var(--border); box-shadow: 0 20px 30px -20px rgba(15,23,42,.3); }
  .nav-links.open { display: flex; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 4rem 0 6rem; }
  .section { padding: 4.5rem 0; }
}

/* Added: chips, client list, notes, extra layouts */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 2rem; }
.chips.left { justify-content: flex-start; margin: .6rem 0 0; }
.chip { padding: .5rem 1.1rem; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-weight: 500; font-size: .92rem; color: var(--ink); box-shadow: 0 4px 12px -8px rgba(30,41,99,.3); }
.panel .chip { background: #fff; }
.client-list { list-style: none; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: .8rem 2rem; }
.client-list li { position: relative; padding-left: 1.6rem; }
.client-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }
.note { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 1.5rem; }
.avatar.left { margin: 0 0 1.1rem; }
.role { color: var(--primary); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }
.steps-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); row-gap: 2.5rem; }
.areas { text-align: center; margin-top: 3.5rem; }
.areas h3 { margin-bottom: 1.2rem; }
@media (max-width: 760px) { .client-list { grid-template-columns: 1fr; } }
.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-3 { grid-template-columns: 1fr; } }

/* Industries page */
.ticks { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--grad); }
.ticks li::after { content: ""; position: absolute; left: .34rem; top: .5em; width: .3rem; height: .52rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.85); }
.client-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.client { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; }
.client p { color: var(--ink); font-weight: 500; line-height: 1.45; }
.client-mark { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.2rem; }
.industry-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .industry-grid { grid-template-columns: 1fr; } }

/* Illustrations */
.hero-img { display: block; width: 100%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.4)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split.rev .split-img { order: 2; }
.split-img img, .reeng-img img { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 60px -28px rgba(30,41,99,.4); }
.split-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: .9rem 0 .8rem; }
.split-text > p { margin-bottom: 1rem; }
.split-text .ticks { margin: 1rem 0 1.8rem; }
.reeng-img { max-width: 760px; margin: 0 auto 3rem; }
.ind-card { overflow: hidden; }
.card-img { display: block; width: calc(100% + 4rem); max-width: none; height: auto; aspect-ratio: 640 / 300; object-fit: cover; margin: -2rem -2rem 1.6rem; }
.page-banner::after, .cta::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); mask-image: linear-gradient(to bottom, #000, transparent 90%); pointer-events: none; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } .split.rev .split-img { order: 0; } .hero-visual { margin: 0 auto; } }
@media (max-width: 760px) { .industry-grid { grid-template-columns: 1fr; } }

/* Showcase images */
.showcase { margin: 0 auto 2.5rem; }
.showcase img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--border); box-shadow: 0 30px 60px -28px rgba(30,41,99,.4); }
.showcase-narrow { max-width: 760px; margin-bottom: 0; }

/* Benefits & Summary panel */
.benefits-panel { position: relative; overflow: hidden; border-radius: 26px; padding: 3.5rem 3rem; color: #e2e8f0; background: radial-gradient(900px 400px at 100% 0%, rgba(124,58,237,.55), transparent 60%), linear-gradient(135deg, #0b1220 0%, #1e1b4b 60%, #312e81 100%); box-shadow: 0 30px 60px -28px rgba(30,41,99,.5); }
.benefits-panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 46px, transparent 46px 110px); pointer-events: none; }
.benefits-panel > * { position: relative; }
.benefits-panel h2 { color: #fff; text-align: center; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 2.8rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; max-width: 900px; margin: 0 auto; }
.benefit { display: flex; align-items: center; gap: 1.2rem; }
.benefit p { color: #f1f5f9; font-size: 1.08rem; line-height: 1.5; font-weight: 500; }
.b-icon { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: #ede9fe; color: #4f46e5; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5), inset 0 0 0 5px #fff; transition: transform .25s; }
.b-icon .svg-icon { width: 36px; height: 36px; stroke-width: 1.7; }
.benefit:hover .b-icon { transform: scale(1.08); }
@media (max-width: 760px) { .benefits-panel { padding: 2.5rem 1.4rem; } .benefit-grid { grid-template-columns: 1fr; gap: 1.5rem; } .b-icon { width: 62px; height: 62px; } }

/* AI in Asset Management */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 2.4rem; position: relative; }
.timeline::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, #a5b4fc 0 8px, transparent 8px 16px); z-index: 0; }
.tl-item { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.4rem 1.6rem 1.8rem; text-align: center; }
.tl-item h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.tl-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: .3rem 1rem; border-radius: 999px; background: #eef2ff; border: 1px solid #c7d2fe; color: var(--primary); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-tag.now { background: var(--grad); color: #fff; border-color: transparent; }
.ai-grid { margin-bottom: 2rem; }
.callout { display: flex; gap: 1.2rem; align-items: center; background: linear-gradient(135deg, rgba(79,70,229,.07), rgba(6,182,212,.08)); border: 1px solid rgba(79,70,229,.18); border-radius: var(--radius); padding: 1.6rem 2rem; margin-bottom: 2rem; }
.callout .icon-box { margin-bottom: 0; background: #fff; }
.callout h3 { margin-bottom: .25rem; }
.outcomes { margin-bottom: 0; }
.btn-outline-dark { background: transparent; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; margin-left: .5rem; }
.btn-outline-dark:hover { background: rgba(79,70,229,.08); box-shadow: none; }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; gap: 2rem; } .timeline::before { display: none; } .callout { flex-direction: column; align-items: flex-start; } .btn-outline-dark { margin: .8rem 0 0; } }

/* Asset tracking lists */
.bullets { list-style: none; display: grid; gap: 1rem; margin-top: .6rem; }
.bullets > li { position: relative; padding-left: 1.6rem; font-weight: 500; color: var(--ink); }
.bullets > li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }
.numbered { list-style: none; counter-reset: n; margin-top: .9rem; display: grid; gap: .55rem; font-weight: 400; color: var(--text); }
.numbered li { counter-increment: n; display: flex; align-items: center; gap: .8rem; }
.numbered li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef2ff; color: var(--primary); font-size: .85rem; font-weight: 700; border: 1px solid #c7d2fe; }
.tracking-row { margin-top: 5rem; }
@media (max-width: 900px) { .tracking-row { margin-top: 3rem; } }

/* Combined picture collage (Asset Management) */
.collage { display: grid; }
.collage img { display: block; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -28px rgba(30,41,99,.45); }
.collage-main { width: 100%; }
.collage-over { width: 56%; margin: -90px 0 0 auto; border: 6px solid #fff; position: relative; }
.numbered.compact { margin-top: .6rem; gap: .35rem; }
.numbered.compact li::before { width: 24px; height: 24px; font-size: .78rem; }
.tick-sub { display: block; margin-top: .6rem; }
@media (max-width: 900px) { .collage-over { width: 62%; margin-top: -60px; } }

/* fixes: nested numbered list inside .ticks, lighter overlap on collage */
.ticks .numbered li { padding-left: 0; position: static; }
.ticks .numbered li::before { position: static; left: auto; top: auto; width: 26px; height: 26px; border-radius: 50%; background: #eef2ff; color: var(--primary); }
.ticks .numbered li::after { content: none; }
.collage-over { width: 50%; margin-top: -26px; }
@media (max-width: 900px) { .collage-over { width: 56%; margin-top: -20px; } }

/* No overlap: tracking picture sits below the dashboard picture */
.collage { gap: 1.8rem; }
.collage-over { width: 82%; margin: 0 auto; border: 0; }
@media (max-width: 900px) { .collage-over { width: 100%; margin: 0; } }

/* Specialised solutions grid (centres a short last row) */
.solutions-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.solutions-grid .card { flex: 1 1 250px; max-width: 270px; }
.solutions-grid .card { flex: 0 1 calc(25% - 1.2rem); max-width: none; }
@media (max-width: 1000px) { .solutions-grid .card { flex-basis: calc(33.333% - 1.1rem); } }
@media (max-width: 760px) { .solutions-grid .card { flex-basis: calc(50% - .8rem); } }
@media (max-width: 520px) { .solutions-grid .card { flex-basis: 100%; } }
/* END zs-custom-css */