:root {
    --color-sidebar: #333533;
    --color-bg: #ededed;
    --color-bg-alt: #e8e8e8;
}

body {
    background-color: var(--color-bg);
}

.hero-gradient {
    background-image: url("../images/dark-stripes-light.png"), url("../images/final-scaled.jpg");
    background-size: auto, cover;
    background-position: 0 0, center 62%;
    background-repeat: repeat, no-repeat;
    position: relative;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 53, 51, 0.75);
    z-index: 1;
}

.hero-gradient > * {
    position: relative;
    z-index: 2;
}

.feature-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    border-left-color: #7B1FA2;
}

/* Mobile: show border on all cards, alternating sides */
@media (max-width: 767px) {
    .feature-card:nth-child(odd) {
        border-left-color: #7B1FA2;
    }

    .feature-card:nth-child(even) {
        border-left-color: transparent;
        border-right-color: #7B1FA2;
    }
}

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

.btn-icon-white {
    filter: brightness(0) invert(1);
}