/* CSS VARIABLES (Design Tokens) */

[class*="bz"],
[class*="bz"] * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

[class*="bz"]:focus,
[class*="bz"] *:focus {
    outline: none;
}

:root {
    /* BASE VALUES */
    --bz-border-radius: 12px;
    --bz-padding: 24px;
    --bz-padding-tablet: 20px;
    --bz-padding-mobile: 15px;
    --bz-min-height: 400px;
    --bz-transition-speed: 0.3s;
    /* CONTAINER DIMENSIONS */
    --bz-container-max-width: 800px;
    --bz-container-max-width-tablet: 750px;
    --bz-container-max-width-mobile: 350px;
    /* SWIPER HEIGHTS */
    --bz-swiper-height: 400px;
    --bz-swiper-height-tablet: 300px;
    --bz-swiper-height-mobile: 250px;
    /* SLIDE DIMENSIONS */
    --bz-slide-width: 180px;
    --bz-slide-width-tablet: 150px;
    --bz-slide-width-mobile: 100px;
    /* IMAGE DIMENSIONS */
    --bz-image-max-width: 160px;
    --bz-image-max-width-tablet: 140px;
    --bz-image-max-width-mobile: 90px;
    /* EFFECTS */
    --bz-hover-scale: 1.05;
    --bz-active-scale: 1.1;
    --bz-transition-duration: 0.3s;



    /* Glass Theme */
    --bz-theme-glass-bg: rgba(15, 15, 15, 0.6);
    --bz-theme-glass-border: rgba(255, 255, 255, 0.15);
    --bz-theme-glass-blur: 12px;
    --bz-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --bz-theme-glass-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    /* Dark Theme */
    --bz-theme-dark-bg: linear-gradient(135deg, rgba(20, 20, 25, 0.98), rgba(30, 30, 40, 0.98));
    --bz-theme-dark-border: rgba(255, 255, 255, 0.08);
    --bz-theme-dark-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    --bz-theme-dark-glow: 0 0 30px rgba(100, 100, 255, 0.15);

    /* Light Theme */
    --bz-theme-light-bg: rgba(255, 255, 255, 0.98);
    --bz-theme-light-border: rgba(0, 0, 0, 0.12);
    --bz-theme-light-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --bz-theme-light-inner: inset 0 1px 0 rgba(255, 255, 255, 1);

    /* Animation tokens */
    --bz-animation-duration: 0.6s;
    --bz-animation-stagger: 50ms;
    --bz-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    /* CAROUSEL SPECIFIC (bzc- prefix) - BACKWARD COMPATIBLE */
    --bzc-border-radius: var(--bz-border-radius);
    --bzc-padding: var(--bz-padding);
    --bzc-swiper-height: var(--bz-swiper-height);
    --bzc-slide-width: var(--bz-slide-width);
    --bzc-image-max-width: var(--bz-image-max-width);
    --bzc-hover-scale: var(--bz-hover-scale);
    --bzc-active-scale: var(--bz-active-scale);
    --bzc-transition-duration: var(--bz-transition-duration);
    /* GLASS THEME VARIABLES */
    --bzc-glass-bg: var(--bz-theme-glass-bg);
    --bzc-glass-border: var(--bz-theme-glass-border);
    --bzc-glass-shadow: var(--bz-theme-glass-shadow);
    --bzc-glass-blur: var(--bz-theme-glass-blur);
    /* DARK THEME VARIABLES */
    --bzc-dark-border: var(--bz-theme-dark-border);
    --bzc-dark-shadow: var(--bz-theme-dark-shadow);
    --bzc-dark-bg: var(--bz-theme-dark-bg);
    --bzc-dark-glow: var(--bz-theme-dark-glow);
    /* LIGHT THEME VARIABLES */
    --bzc-light-bg: var(--bz-theme-light-bg);
    --bzc-light-shadow: var(--bz-theme-light-shadow);
    --bzc-light-inner: var(--bz-theme-light-inner);

    /* Bento grid */
    --bzb-max-width: 1200px;
    --bzb-max-width-tablet: 100%;
    --bzb-max-width-mobile: 100%;
    --bzb-row-height: 160px;
    --bzb-row-height-tablet: 140px;
    --bzb-row-height-mobile: 120px;
    --bzb-columns: 4;
    --bzb-columns-tablet: 2;
    --bzb-columns-mobile: 1;
    --bzb-gap: 16px;
    --bzb-gap-tablet: 12px;
    --bzb-gap-mobile: 8px;
    --bzb-item-radius: var(--bz-border-radius);
    --bzb-item-min-height: 120px;
    --bzb-item-padding: 20px;

    /* Bento Card */
    --bzb-card-title-size: 1.2rem;
    --bzb-card-title-weight: 600;
    --bzb-card-desc-size: 0.9rem;
    --bzb-card-overlay-padding: 20px;

    /* Bento Metric */
    --bzb-metric-value-size: 2.5rem;
    --bzb-metric-value-weight: 700;
    --bzb-metric-label-size: 0.85rem;
    --bzb-metric-label-opacity: 0.7;
    --bzb-metric-icon-size: 1.5rem;
    --bzb-metric-trend-up: #10b981;
    --bzb-metric-trend-down: #ef4444;

    /* Bento Feature */
    --bzb-feature-icon-size: 2.5rem;
    --bzb-feature-label-size: 0.95rem;
    --bzb-feature-label-weight: 500;
    --bzb-feature-desc-size: 0.85rem;
    --bzb-feature-desc-opacity: 0.7;

    /* Bento Quote */
    --bzb-quote-text-size: 1.1rem;
    --bzb-quote-text-weight: 400;
    --bzb-quote-author-size: 0.9rem;
    --bzb-quote-author-weight: 600;
    --bzb-quote-role-size: 0.8rem;
    --bzb-quote-role-opacity: 0.7;
    --bzb-quote-avatar-size: 40px;
}

/* Shared animations */

@keyframes bz-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bz-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bz-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Backward compatibility alias */
@keyframes bzc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Visibility utilities */

.bz-hidden,
.bzc-hidden,
.bzb-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease-in, visibility 0.4s;
}

.bz-visible,
.bzc-visible,
.bzb-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-in, visibility 0.4s;
}

/* Loading and empty states */

.bz-loading,
.bz-empty,
.bzc-loading,
.bzc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--bz-min-height);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 40px;
    margin: 0 auto;
    max-width: var(--bz-container-max-width);
}

/* Spinner */

.bz-spinner,
.bzc-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bz-spin 1s linear infinite;
}

/* Fallback item */

.bz-fallback-item,
.bzc-fallback-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
}

/* CAROUSEL STYLES */

.bzc-carousel-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--bzc-border-radius);
    padding: var(--bzc-padding);
    overflow: hidden;
    width: 100%;
    max-width: var(--bz-container-max-width);
    margin: 0 auto;
    position: relative;
    min-height: calc(var(--bzc-swiper-height) + var(--bzc-padding) * 2);
}

/* Carousel themes */

.bzc-carousel-box.bzc-theme-glass {
    background: var(--bz-theme-glass-bg);
    box-shadow: var(--bz-theme-glass-shadow);
    backdrop-filter: blur(var(--bz-theme-glass-blur));
    -webkit-backdrop-filter: blur(var(--bz-theme-glass-blur));
    border: 1px solid var(--bz-theme-glass-border);
}

.bzc-carousel-box.bzc-theme-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bz-theme-glass-highlight);
    pointer-events: none;
}

.bzc-carousel-box.bzc-theme-dark {
    background: var(--bz-theme-dark-bg);
    box-shadow: var(--bz-theme-dark-shadow), var(--bz-theme-dark-glow);
    border: 1px solid var(--bz-theme-dark-border);
}

.bzc-carousel-box.bzc-theme-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--bzc-border-radius);
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.bzc-carousel-box.bzc-theme-light {
    background: var(--bz-theme-light-bg);
    box-shadow: var(--bz-theme-light-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--bz-theme-light-border);
}

.bzc-carousel-box.bzc-theme-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    pointer-events: none;
    border-radius: 10px;
}

.bzc-carousel-box.bzc-theme-light~.bzc-loading,
.bzc-carousel-box.bzc-theme-light~.bzc-empty,
.bzc-carousel-box.bzc-theme-light~.bz-loading,
.bzc-carousel-box.bzc-theme-light~.bz-empty {
    color: rgba(0, 0, 0, 0.7);
}

.bzc-carousel-box.bzc-theme-minimal {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Swiper container */

.swiper-container {
    width: 100%;
    height: var(--bzc-swiper-height);
    perspective: 1500px;
    overflow: visible;
}

.swiper-wrapper {
    overflow: visible !important;
}

/* Bento grid */

.bzb-grid {
    display: grid;
    grid-template-columns: repeat(var(--bzb-columns), 1fr);
    grid-auto-rows: minmax(var(--bzb-row-height, 160px), auto);
    grid-auto-flow: dense;
    gap: var(--bzb-gap);
    width: 100%;
    max-width: var(--bzb-max-width);
    margin: 0 auto;
    padding: var(--bz-padding);
}

/* Bento item base */

.bzb-item {
    border-radius: var(--bzb-item-radius);
    min-height: var(--bzb-item-min-height);
    padding: var(--bzb-item-padding);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* GPU acceleration hints for smoother rendering */
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.bzb-item.bzb-animate {
    animation: bz-fade-in var(--bz-animation-duration) var(--bz-animation-easing) forwards;
}

.bzb-grid.bzb-no-animation .bzb-item {
    opacity: 1;
    animation: none;
}

/* Column spans */

.bzb-item.bzb-col-1 {
    grid-column: span 1;
}

.bzb-item.bzb-col-2 {
    grid-column: span 2;
}

.bzb-item.bzb-col-3 {
    grid-column: span 3;
}

.bzb-item.bzb-col-4 {
    grid-column: span 4;
}

/* Row spans */

.bzb-item.bzb-row-1 {
    grid-row: span 1;
}

.bzb-item.bzb-row-2 {
    grid-row: span 2;
}

.bzb-item.bzb-row-3 {
    grid-row: span 3;
}

.bzb-item.bzb-row-4 {
    grid-row: span 4;
}

/* Bento item hover */

.bzb-item {
    transition: transform var(--bz-transition-duration) ease,
        box-shadow var(--bz-transition-duration) ease;
}

.bzb-item:hover {
    transform: translateY(-2px);
}

/* Bento grid themes */

/* Glass theme - Desktop: blur on each card for premium look */
.bzb-grid.bzc-theme-glass .bzb-item {
    background: var(--bz-theme-glass-bg);
    border: 1px solid var(--bz-theme-glass-border);
    backdrop-filter: blur(var(--bz-theme-glass-blur));
    -webkit-backdrop-filter: blur(var(--bz-theme-glass-blur));
    box-shadow: var(--bz-theme-glass-shadow);
}

.bzb-grid.bzc-theme-glass .bzb-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bz-theme-glass-highlight);
    pointer-events: none;
}

.bzb-grid.bzc-theme-glass .bzb-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Dark theme */
.bzb-grid.bzc-theme-dark .bzb-item {
    background: var(--bz-theme-dark-bg);
    border: 1px solid var(--bz-theme-dark-border);
    box-shadow: var(--bz-theme-dark-shadow);
}

.bzb-grid.bzc-theme-dark .bzb-item:hover {
    box-shadow: var(--bz-theme-dark-shadow), var(--bz-theme-dark-glow);
}

/* Light theme */
.bzb-grid.bzc-theme-light .bzb-item {
    background: var(--bz-theme-light-bg);
    border: 1px solid var(--bz-theme-light-border);
    box-shadow: var(--bz-theme-light-shadow);
    color: rgba(0, 0, 0, 0.87);
}

.bzb-grid.bzc-theme-light .bzb-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    pointer-events: none;
    border-radius: var(--bzb-item-radius);
}

.bzb-grid.bzc-theme-light .bzb-item:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}

/* Minimal theme */
.bzb-grid.bzc-theme-minimal .bzb-item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.bzb-grid.bzc-theme-minimal .bzb-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

/* Bento content helpers (for Items mode) */

.bzb-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
}

.bzb-item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
    z-index: 1;
}

.bzb-item-description {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    padding: 0 16px;
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

/* Bento Card component */

.bzb-card-container {
    padding: 0;
    cursor: pointer;
}

.bzb-metric,
.bzb-feature,
.bzb-quote {
    cursor: pointer;
}

.bzb-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bzb-item:hover .bzb-card-image {
    transform: scale(1.05);
}

.bzb-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--bzb-card-overlay-padding);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    z-index: 1;
}

.bzb-card-title {
    font-size: var(--bzb-card-title-size);
    font-weight: var(--bzb-card-title-weight);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.bzb-card-description {
    font-size: var(--bzb-card-desc-size);
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
}

/* Bento Metric component */

.bzb-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: 8px;
}

.bzb-metric-icon {
    font-size: var(--bzb-metric-icon-size);
    line-height: 1;
    margin-bottom: 4px;
}

.bzb-metric-value {
    font-size: var(--bzb-metric-value-size);
    font-weight: var(--bzb-metric-value-weight);
    line-height: 1;
}

.bzb-metric-label {
    font-size: var(--bzb-metric-label-size);
    opacity: var(--bzb-metric-label-opacity);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bzb-metric-trend {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.bzb-metric-trend-up {
    color: var(--bzb-metric-trend-up);
    background: rgba(16, 185, 129, 0.1);
}

.bzb-metric-trend-down {
    color: var(--bzb-metric-trend-down);
    background: rgba(239, 68, 68, 0.1);
}

/* Bento Feature component */

.bzb-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: 12px;
}

.bzb-feature-icon {
    font-size: var(--bzb-feature-icon-size);
    line-height: 1;
}

.bzb-feature-label {
    font-size: var(--bzb-feature-label-size);
    font-weight: var(--bzb-feature-label-weight);
    line-height: 1.3;
    color: inherit;
}

.bzb-feature-description {
    font-size: var(--bzb-feature-desc-size);
    opacity: var(--bzb-feature-desc-opacity);
    margin: 0;
    line-height: 1.4;
    color: inherit;
}

/* Bento Quote component */

.bzb-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    gap: 16px;
}

.bzb-quote-text {
    font-size: var(--bzb-quote-text-size);
    font-weight: var(--bzb-quote-text-weight);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    border: none;
}

.bzb-quote-text::before,
.bzb-quote-text::after {
    content: none;
}

.bzb-quote-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bzb-quote-avatar {
    width: var(--bzb-quote-avatar-size);
    height: var(--bzb-quote-avatar-size);
    border-radius: 50%;
    object-fit: cover;
}

.bzb-quote-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bzb-quote-name {
    font-size: var(--bzb-quote-author-size);
    font-weight: var(--bzb-quote-author-weight);
}

.bzb-quote-role {
    font-size: var(--bzb-quote-role-size);
    opacity: var(--bzb-quote-role-opacity);
}

/* Legacy template styles (for Items mode compatibility) */

.bzb-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bzb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.bzb-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.bzb-stat-label {
    font-size: 0.9rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bzb-card-simple {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: inherit;
}

.bzb-card-simple-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    color: #fff;
    z-index: 1;
}

.bzb-card-simple-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Image hover effects */

.bzb-item:hover .bzb-card-image,
.bzb-item:hover .bzb-item-image {
    transform: scale(1.05);
}

.bzb-card-image,
.bzb-item-image {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme text colors */

.bzb-grid.bzc-theme-light .bzb-metric-trend-up {
    color: #065f46;
    background: rgba(6, 95, 70, 0.12);
}

.bzb-grid.bzc-theme-light .bzb-metric-trend-down {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.12);
}

/* ENHANCED STAT CARDS */

.bzb-stat {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(34, 211, 238, 0.05));
}

/* Responsive - Tablet */

@media (max-width: 991px) {
    :root {
        --bz-container-max-width: var(--bz-container-max-width-tablet);
        --bz-padding: var(--bz-padding-tablet);
        --bz-swiper-height: var(--bz-swiper-height-tablet);
        --bz-slide-width: var(--bz-slide-width-tablet);
        --bz-image-max-width: var(--bz-image-max-width-tablet);

        --bzc-padding: var(--bz-padding);
        --bzc-swiper-height: var(--bz-swiper-height);
        --bzc-slide-width: var(--bz-slide-width);
        --bzc-image-max-width: var(--bz-image-max-width);

        --bzb-metric-value-size: 2rem;
        --bzb-feature-icon-size: 2rem;
    }

    .bzb-grid {
        grid-template-columns: repeat(var(--bzb-columns-tablet), 1fr);
        grid-auto-rows: minmax(var(--bzb-row-height-tablet), auto);
        gap: var(--bzb-gap-tablet);
    }

    .bzb-item.bzb-col-3,
    .bzb-item.bzb-col-4 {
        grid-column: span 2;
    }
}

/* Responsive - Mobile */

@media (max-width: 768px) {

    .bzc-visible,
    .bz-visible {
        transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    }

    /* Glass theme mobile - NO blur for performance, use solid backgrounds instead */
    .bzb-grid.bzc-theme-glass .bzb-item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Solid dark background simulating glass look without blur */
        background: linear-gradient(135deg, rgba(25, 25, 30, 0.92), rgba(15, 15, 20, 0.95)) !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .bzb-grid.bzc-theme-glass .bzb-item::before {
        /* Keep subtle highlight for glass-like appearance */
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    }

    /* Mobile grid optimizations */
    .bzb-grid {
        padding: 12px;
        gap: 12px;
    }

    /* Card containers - remove padding for full-bleed images */
    .bzb-item.bzb-card-container,
    .bzb-item:has(.bzb-item-image),
    .bzb-item:has(.bzb-card-image) {
        padding: 0 !important;
    }
}

/* Responsive - Small Mobile */

@media (max-width: 600px) {
    :root {
        --bz-container-max-width: var(--bz-container-max-width-mobile);
        --bz-padding: var(--bz-padding-mobile);
        --bz-swiper-height: var(--bz-swiper-height-mobile);
        --bz-slide-width: var(--bz-slide-width-mobile);
        --bz-image-max-width: var(--bz-image-max-width-mobile);

        --bzc-padding: var(--bz-padding);
        --bzc-swiper-height: var(--bz-swiper-height);
        --bzc-slide-width: var(--bz-slide-width);
        --bzc-image-max-width: var(--bz-image-max-width);

        --bzb-item-padding: 16px;
        --bzb-item-min-height: 140px;
        --bzb-metric-value-size: 2rem;
        --bzb-feature-icon-size: 2rem;
        --bzb-quote-text-size: 1rem;
    }

    .bzb-grid {
        grid-template-columns: repeat(var(--bzb-columns-mobile), 1fr);
        grid-auto-rows: minmax(var(--bzb-row-height-mobile), auto);
        gap: 12px;
        padding: 10px;
    }

    .bzb-item[class*="bzb-col-"] {
        grid-column: span 1;
    }

    .bzb-item[class*="bzb-row-"] {
        grid-row: span 1;
    }

    .bzb-stat-value {
        font-size: 2rem;
    }

    /* Ensure card images fill the card on small mobile */
    .bzb-item.bzb-card-container,
    .bzb-item:has(.bzb-item-image),
    .bzb-item:has(.bzb-card-image) {
        padding: 0 !important;
        min-height: 200px;
    }

    /* Better touch targets for metrics and features */
    .bzb-metric,
    .bzb-feature {
        min-height: 120px;
    }
}

/* Semantic color system */

:root {
    --bz-text-primary: rgba(255, 255, 255, 0.95);
    --bz-text-secondary: rgba(255, 255, 255, 0.7);
    --bz-text-muted: rgba(255, 255, 255, 0.5);
    --bz-accent-primary: #3b82f6;
    --bz-accent-success: #10b981;
    --bz-accent-danger: #ef4444;
    --bz-accent-warning: #f59e0b;
    --bz-accent-info: #06b6d4;
}

.bzc-theme-light,
.bzb-grid.bzc-theme-light {
    --bz-text-primary: rgba(0, 0, 0, 0.87);
    --bz-text-secondary: rgba(0, 0, 0, 0.6);
    --bz-text-muted: rgba(0, 0, 0, 0.38);
}

.bzb-grid.bzc-theme-light .bzb-metric-label,
.bzb-grid.bzc-theme-light .bzb-feature-description {
    opacity: 1;
    color: rgba(0, 0, 0, 0.65);
}

/* Bento hover states */

.bzb-item {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
}

.bzb-item:hover {
    transform: translateY(-4px);
}

.bzb-grid.bzc-theme-glass .bzb-item:hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.bzb-grid.bzc-theme-dark .bzb-item:hover {
    box-shadow:
        var(--bz-theme-dark-shadow),
        var(--bz-theme-dark-glow),
        0 0 40px rgba(100, 100, 255, 0.1);
}

.bzb-grid.bzc-theme-light .bzb-item:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.bzb-grid.bzc-theme-minimal .bzb-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

/* Card hover effects */

.bzb-card-container:hover .bzb-card-image,
.bzb-item:hover .bzb-card-image {
    transform: scale(1.08);
}

.bzb-card-container:hover .bzb-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

/* Metric hover effects */

.bzb-metric .bzb-metric-value,
.bzb-metric .bzb-metric-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bzb-metric:hover .bzb-metric-value {
    transform: scale(1.05);
}

.bzb-metric:hover .bzb-metric-icon {
    transform: scale(1.15);
}

/* Feature hover effects */

.bzb-feature .bzb-feature-icon {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bzb-feature:hover .bzb-feature-icon {
    transform: scale(1.2);
}

/* Quote hover effects */

.bzb-quote .bzb-quote-text,
.bzb-quote .bzb-quote-avatar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bzb-quote:hover .bzb-quote-text {
    transform: translateX(4px);
}

.bzb-quote:hover .bzb-quote-avatar {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Text overflow protection */

.bzb-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bzb-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bzb-feature-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bzb-feature-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bzb-quote-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bzb-metric-label {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accessibility focus states */

.bzb-item:focus {
    outline: none;
}

.bzb-item:focus-visible {
    outline: 2px solid var(--bz-accent-primary);
    outline-offset: 4px;
}

.bzb-grid.bzc-theme-light .bzb-item:focus-visible {
    outline-color: rgba(0, 0, 0, 0.6);
}

.bzb-item a:focus-visible,
.bzb-item button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Nested carousel in Bento - default sizing for carousel inside Bento cells */

.bzb-item:has(.bzc-carousel-box) {
    display: flex;
    align-items: center;
    justify-content: center;
    --bzc-swiper-height: 280px;
    --bzc-slide-width: 140px;
    --bzc-image-max-width: 130px;
}

.bzb-item .bzc-carousel-box {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px;
    min-height: auto;
    border-radius: inherit;
}

.bzb-item .swiper-container {
    height: var(--bzc-swiper-height);
}

.bzb-item .bzc-carousel-box.bzc-theme-glass {
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bzb-item .bzc-carousel-box.bzc-theme-dark {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bzb-item .bzc-carousel-box.bzc-theme-light {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.bzb-item .bzc-carousel-box.bzc-theme-minimal {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.bzb-item:has(.bzc-carousel-box) {
    min-height: 320px;
}

.bzb-item.bzb-row-2:has(.bzc-carousel-box) {
    min-height: calc(var(--bzb-row-height, 160px) * 2 + var(--bzb-gap, 16px));
}

.bzb-carousel-container {
    min-height: 320px;
}

.bzb-carousel-container.bzb-row-2 {
    min-height: calc(var(--bzb-row-height, 160px) * 2 + var(--bzb-gap, 16px));
}

/* Semantic colors for components */

.bzb-metric-value {
    color: var(--bz-text-primary);
}

.bzb-metric-label {
    color: var(--bz-text-secondary);
}

.bzb-feature-label {
    color: var(--bz-text-primary);
}

.bzb-feature-description {
    color: var(--bz-text-secondary);
}

.bzb-quote-text {
    color: var(--bz-text-primary);
}

.bzb-quote-name {
    color: var(--bz-text-primary);
}

.bzb-quote-role {
    color: var(--bz-text-muted);
}

.bzb-card-overlay .bzb-card-title,
.bzb-card-overlay .bzb-card-description {
    color: #ffffff;
}